body {
   font-family: system-ui, sans-serif;
   margin: 0;
   color: #212529
}

.container {
   max-width: 1140px;
   margin: auto;
   padding: 1.5rem
}

.py-4 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem
}

.table {
   width: 100%;
   border-collapse: collapse
}

.table th,
.table td {
   padding: .65rem;
   border-bottom: 1px solid #dee2e6;
   text-align: left
}

.table-responsive {
   overflow-x: auto
}

.btn {
   display: inline-block;
   padding: .4rem .7rem;
   border: 1px solid #6c757d;
   border-radius: .25rem;
   text-decoration: none;
   background: #fff;
   color: #212529
}

.btn-primary {
   background: #0d6efd;
   color: #fff;
   border-color: #0d6efd
}

.btn-outline-danger {
   color: #b02a37
}

.form-control,
.form-select {
   display: block;
   width: 100%;
   padding: .4rem;
   border: 1px solid #adb5bd;
   border-radius: .25rem;
   box-sizing: border-box
}

.form-check-input {
   width: 1em;
   height: 1em
}

.row {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem
}

.col-md-4 {
   flex: 1 1 280px
}

.col-md-3,
.col-md-2 {
   flex: 1 1 180px
}

.alert {
   padding: .75rem;
   background: #d1e7dd;
   margin-bottom: 1rem
}

.pagination {
   display: flex;
   list-style: none;
   padding: 0;
   gap: .25rem
}

.page-link {
   padding: .4rem
}

.visually-hidden {
   position: absolute;
   clip: rect(0, 0, 0, 0)
}

.table th a {
   color: inherit;
   text-decoration: none
}

.table th a:hover {
   text-decoration: underline
}

.text-end {
   text-align: right !important
}

.modal {
   display: none;
   position: fixed;
   inset: 0;
   background: rgba(15, 23, 42, .55);
   z-index: 1050;
   padding: 2.5rem 1rem;
   overflow: auto;
}

.modal.show {
   display: block
}

.modal-dialog {
   max-width: 760px;
   margin: auto
}

.modal-content {
   background: #fff;
   border-radius: .55rem;
   position: relative;
   box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .25);
   overflow: hidden;
}

.modal-close {
   position: absolute;
   right: .5rem;
   top: .35rem;
   border: 0;
   background: transparent;
   font-size: 1.5rem
}

.modal-content > .modal-close {
    position: absolute;
    right: .8rem;
    top: .55rem;
    z-index: 2;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    padding: .15rem .35rem;
    cursor: pointer;
}

.modal-content > .modal-close:hover {
    opacity: .75;
}

.toast-container {
   position: fixed;
   right: 1rem;
   top: 1rem;
   z-index: 1100;
   display: grid;
   gap: .5rem
}

.toast {
   min-width: 240px;
   padding: .75rem;
   border-radius: .3rem;
   box-shadow: 0 .25rem .75rem #0003;
   background: #fff;
   display: flex;
   justify-content: space-between
}

.toast-success {
   border-left: 4px solid #198754
}

.toast-error {
   border-left: 4px solid #dc3545
}

.toast-warning {
   border-left: 4px solid #ffc107
}

.toast-info {
   border-left: 4px solid #0dcaf0
}

.toast-close {
   border: 0;
   background: transparent;
   font-size: 1.1rem
}

.crudkit-form {
   width: 100%;
   max-width: 46rem
}

.crudkit-form-row {
   display: grid;
   grid-template-columns: 13rem minmax(0, 1fr);
   align-items: start;
   gap: 0;
   margin-left: 0;
   margin-right: 0
}

.crudkit-form-label {
   grid-column: 1;
   max-width: none;
   padding: .4rem 1rem .4rem 0;
   box-sizing: border-box
}

.crudkit-form-control {
   grid-column: 2;
   max-width: none;
   min-width: 0;
   box-sizing: border-box
}

.crudkit-form-row .offset-md-3 {
   grid-column: 2;
   margin-left: 0;
   max-width: none
}

.crudkit-form-actions {
   margin-left: 13rem;
   padding-top: .25rem
}

.invalid-feedback {
   color: #b02a37
}

.is-invalid {
   border-color: #dc3545
}

.form-text {
   font-size: .875em;
   color: #6c757d
}


/* =========================================================
   Encabezado del formulario modal
   ========================================================= */

#crudkit-modal-body > h1 {
   margin: 0 0 1.5rem 0;
   padding: 1rem 3.25rem 1rem 1.5rem;
   background: #010c1c;
   color: #fff;
   font-size: 1.25rem;
   font-weight: 600;
}


/* =========================================================
   Cuerpo
   ========================================================= */

#crudkit-modal-body .crudkit-form {
   padding: 0 0.5rem;
}

#crudkit-modal-body .crudkit-form-row {
   align-items: center;
}


/* =========================================================
   Pie / acciones
   ========================================================= */

#crudkit-modal-body .crudkit-form-actions {
   /* Conserva el bloque compacto del formulario: las acciones comienzan
      en la misma columna que sus controles, también dentro del modal. */
   margin: 1.5rem 0 0 13rem;
   padding: 1rem 0;
   background: transparent;
   border-top: 0;

   display: flex;
   justify-content: flex-start;
   gap: .5rem;
}

/* Cancelar recupera comportamiento normal */
#crudkit-modal-body .crudkit-form-actions .modal-close {
   position: static;
}


/* Opcional: un poco más de aire al formulario */
#crudkit-modal-body .crudkit-form-row:last-of-type {
   margin-bottom: .5rem;
}


@media(max-width:767px) {
   .crudkit-form-row {
      grid-template-columns: 1fr
   }

   .crudkit-form-label,
   .crudkit-form-control,
   .crudkit-form-row .offset-md-3 {
      grid-column: 1;
      padding-right: 0
   }

   .crudkit-form-actions {
      margin-left: 0
   }
}

.btn {
   font-weight: 600;
   box-shadow: none;
   transition: background .15s, border-color .15s
}

.btn-primary {
   background: var(--color-primary, #10233f);
   border-color: var(--color-primary, #10233f)
}

.btn-primary:hover {
   background: var(--color-primary-dark, #09182d)
}

.btn-outline-primary {
   color: var(--color-accent, #1c5d99);
   border-color: var(--color-accent, #1c5d99)
}

.btn-outline-secondary {
   color: var(--color-muted, #667085);
   border-color: var(--color-border, #dce4ee)
}

.btn-sm {
   font-size: .78rem;
   padding: .28rem .5rem
}

.table {
   background: #fff;
   border: 1px solid var(--color-border, #dce4ee);
   border-radius: 10px;
   overflow: hidden;
   border-collapse: separate;
   border-spacing: 0
}

.table thead th {
   background: #edf4fa;
   color: var(--color-primary, #10233f);
   font-size: .78rem;
   letter-spacing: .03em;
   text-transform: uppercase
}

.table tbody tr:hover {
   background: #f7fbff
}

.table th,
.table td {
   border-bottom: 1px solid #e8edf3;
   padding: .72rem
}

.table-actions {
   white-space: nowrap
}

.badge {
   display: inline-block;
   padding: .22rem .5rem;
   border-radius: 999px;
   font-size: .75rem;
   font-weight: 700;
   line-height: 1.2
}

.badge-success {
   color: #0d5d38;
   background: #dcf5e7
}

.badge-neutral,
.badge-state {
   color: #475467;
   background: #edf1f5
}

.btn.active {
   background: var(--color-accent, #1c5d99);
   color: #fff;
   border-color: var(--color-accent, #1c5d99)
}

.related-section h2 {
   border-left: 3px solid var(--color-accent, #1c5d99);
   padding-left: .6rem
}

.detail-grid .badge {
   vertical-align: middle
}

.record-actions {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
   align-items: center
}

.record-actions form {
   margin: 0
}

.record-actions .btn {
   min-height: 2.35rem
}

/* Normalización de controles: los estilos nativos de button no deben alterar
   la caja definida por .btn respecto de enlaces o inputs. */
a.btn,
button.btn,
input.btn {
   font: inherit;
   line-height: 1.5;
   box-sizing: border-box;
   vertical-align: middle;
   appearance: none;
   -webkit-appearance: none;
   margin: 0;
   min-height: 0
}