/* ============================================================
   Tía Carmela Admin — Design System
   Brand: #2552B0 / #21BBF4 / #42BE34 / #F99D1C / #1c3e86
   Fonts: Grandstander (brand) + Nunito (UI)
   ============================================================ */

/* --- Base -------------------------------------------------- */
body {
    font-family: 'Nunito', system-ui, sans-serif;
    font-size: 0.9rem;
    background-color: #f5f7fb;
    color: #2d3748;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Grandstander', 'Nunito', sans-serif;
    font-weight: 700;
    color: #1c3e86;
}

/* --- Navbar ------------------------------------------------- */
.navbar {
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.navbar-brand {
    font-family: 'Grandstander', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff !important;
}

.navbar .navbar-nav {
    align-items: center;
    gap: 0.3rem;
}

.navbar .nav-link {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.87rem;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s, color 0.15s;
}

/* The bell icon (fs-5) inherits the body line-height, which pads its
   nav-link taller than the plain-text links next to it. Collapse it
   so the hover box matches the others while staying centered. */
.navbar .nav-link i.bi-envelope {
    line-height: 1;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    background: rgba(255,255,255,0.12);
    color: #fff !important;
}

.navbar .nav-link.active {
    background: rgba(255,255,255,0.18) !important;
    color: #fff !important;
    box-shadow: inset 0 -2px 0 #fff;
}

.navbar .dropdown-menu {
    border: none;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    padding: 0.4rem;
    min-width: 180px;
}

.navbar .dropdown-item {
    border-radius: 6px;
    font-size: 0.87rem;
    font-weight: 600;
    padding: 0.45rem 0.8rem;
    color: #2d3748;
}

.navbar .dropdown-item:hover {
    background: #eef2ff;
    color: var(--brand-color, #2552B0);
}

/* --- Page layout ------------------------------------------- */
.container-fluid {
    max-width: 1400px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* --- Cards -------------------------------------------------- */
.card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 10px 10px 0 0 !important;
    padding: 0.75rem 1.1rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1c3e86;
}

.card-footer {
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-radius: 0 0 10px 10px !important;
    padding: 0.55rem 1.1rem;
}

/* --- Tables ------------------------------------------------- */
.table {
    font-size: 0.875rem;
    color: #2d3748;
}

.table th {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #718096;
    border-bottom: 2px solid #e2e8f0;
    padding: 0.6rem 0.9rem;
    white-space: nowrap;
}

.table td {
    padding: 0.6rem 0.9rem;
    vertical-align: middle;
    border-bottom: 1px solid #f0f4f8;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table-hover tbody tr:hover td {
    background-color: #f0f5ff;
}

/* --- Buttons ----------------------------------------------- */
.btn-primary {
    background-color: var(--brand-color, #2552B0);
    border-color: var(--brand-color, #2552B0);
    font-weight: 700;
    border-radius: 7px;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #1c3e86;
    border-color: #1c3e86;
}

.btn-outline-primary {
    color: var(--brand-color, #2552B0);
    border-color: var(--brand-color, #2552B0);
    font-weight: 700;
    border-radius: 7px;
}
.btn-outline-primary:hover {
    background-color: var(--brand-color, #2552B0);
    border-color: var(--brand-color, #2552B0);
}

.btn-outline-secondary {
    border-radius: 7px;
    font-weight: 600;
}

.btn-sm {
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
}

/* --- Forms -------------------------------------------------- */
.form-label {
    font-weight: 700;
    font-size: 0.82rem;
    color: #4a5568;
    margin-bottom: 0.3rem;
}

.form-control,
.form-select {
    border-color: #cbd5e0;
    border-radius: 7px;
    font-size: 0.875rem;
    color: #2d3748;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-color, #2552B0);
    box-shadow: 0 0 0 3px rgba(37, 82, 176, 0.12);
}

.form-control::placeholder {
    color: #a0aec0;
}

.input-group .form-control { border-radius: 7px 0 0 7px; }
.input-group .btn          { border-radius: 0 7px 7px 0; }

/* --- Badges ------------------------------------------------- */
.badge {
    font-weight: 700;
    font-size: 0.72rem;
    border-radius: 5px;
    padding: 0.28em 0.55em;
}

.badge-genero-nina { background-color: #fce7f3; color: #9d174d; }
.badge-genero-nino { background-color: #dbeafe; color: #1e40af; }

/* --- Alerts ------------------------------------------------- */
.alert {
    border: none;
    border-radius: 9px;
    font-size: 0.875rem;
    font-weight: 600;
}

.alert-success { background: #f0fdf4; color: #166534; border-left: 4px solid #42BE34; }
.alert-danger  { background: #fff5f5; color: #991b1b; border-left: 4px solid #ED131E; }
.alert-warning { background: #fffbeb; color: #92400e; border-left: 4px solid #F99D1C; }

/* --- Page headers ------------------------------------------ */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.page-header h4 {
    margin: 0;
    font-size: 1.25rem;
}

/* --- Buscadores: una «x» dentro, a la derecha, para borrar --- */
/* Todos los campos de búsqueda de la app (type="search" o placeholder «Buscar…»):
   con texto, llevan la «x» dibujada a la derecha; el clic y el Esc los maneja
   app.js. Es CSS (:placeholder-shown) para que se vea bien también cuando la
   pantalla pone o borra el texto por código. La «x» nativa del navegador, fuera.
   `.campo-x`: la misma «x» en un campo que no es buscador (el motivo de Descuentos);
   con `.x-visible` se ve aunque esté vacío (la pantalla decide cuándo). */
input[type="search"],
input[placeholder^="Buscar"],
input.campo-x,
/* Dentro de un .input-group-sm/-lg, Bootstrap (0,2,0) le devolvía el padding de 8 px:
   el clic de app.js (que mide el padding) caía a la derecha de la «x», no sobre ella. */
.input-group > input[type="search"],
.input-group > input[placeholder^="Buscar"] {
    padding-right: 1.75rem;
}
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
input[type="search"]:not(:placeholder-shown):not(.is-invalid):not(.is-valid),
input[placeholder^="Buscar"]:not(:placeholder-shown):not(.is-invalid):not(.is-valid),
input.campo-x:not(:disabled):not(:placeholder-shown),
input.campo-x.x-visible:not(:disabled) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    background-size: .6rem;
}

/* --- Edad de un aula: «[a] a [m] m» (edadInputs) ------------- */
/* Dos números en 124 px: con las flechitas del navegador, y encogida dentro de
   una celda de tabla, el «11» de los meses se veía cortado («1:»). Sin flechitas
   las teclas ↑/↓ siguen funcionando. */
.edad-grupo { width: 124px; min-width: 124px; }
.edad-grupo input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.edad-grupo input[type=number]::-webkit-inner-spin-button,
.edad-grupo input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Acceso al tutorial de la pantalla ---------------------- */
/* Una sola pieza para todas las pantallas: el ▶ de los tutoriales dentro de un
   círculo apenas más oscuro que la página, para que acompañe al título sin
   competir con los botones de acción. Lo pinta tutorialAyuda(). */
.ayuda-tutorial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #eaf0fa;
    color: #2552B0;
    font-size: 0.8rem;
    line-height: 1;
    text-decoration: none;
    vertical-align: middle;
    transition: background-color .15s ease, color .15s ease;
}

/* Un h4 pegado al título no debe arrastrar el interlineado del título. */
h4 > .ayuda-tutorial,
h5 > .ayuda-tutorial,
h6 > .ayuda-tutorial {
    margin-left: .45rem;
    position: relative;
    top: -1px;
}

/* Hover: el relleno se invierte, igual que los iconos de las rejillas. */
.ayuda-tutorial:hover,
.ayuda-tutorial:focus-visible {
    background: #2552B0;
    color: #fff;
}

/* En cabeceras de tarjeta de color (Contabilidad, SIAGIE) el círculo se apoya
   en el propio fondo en vez de traer el azul de la marca. */
.card-header .ayuda-tutorial {
    background: rgba(37, 82, 176, .10);
}

/* --- Detail view labels ------------------------------------ */
.detail-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #718096;
    margin-bottom: 0.15rem;
}

.detail-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #2d3748;
}

/* --- Misc -------------------------------------------------- */
.allergy-warning {
    border-left: 4px solid #ED131E;
    background: #fff5f5;
    border-radius: 0 7px 7px 0;
    padding: 0.6rem 0.9rem;
}

.card-child-header {
    background: linear-gradient(135deg, #eef4ff 0%, #f0fdf4 100%);
}

.list-group-item {
    border-color: #f0f4f8;
    font-size: 0.875rem;
}

.list-group-item-action:hover {
    background-color: #f0f5ff;
    color: var(--brand-color, #2552B0);
}

.dropdown-divider { border-color: #e2e8f0; }

/* Empty state */
.empty-state {
    text-align: center;
    padding: 3.5rem 1rem;
    color: #a0aec0;
}
.empty-state i { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; }
.empty-state p { font-size: 0.9rem; margin: 0; }

/* Acciones de un enlace tokenizado (portal de pagos, Información Familiar,
   formulario de visitas): el enlace no se pinta, sólo sus iconos. */
.link-acciones { display: inline-flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.link-acciones form { display: contents; }
.link-acciones .btn {
    width: 1.9rem; height: 1.9rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.95rem; line-height: 1;
}

/* Notas como bitácora (partials/_notas_bitacora.php): la última arriba, cada una
   con su sello «25 sep 26 14:30 AL» en gris. Cuadro de una línea con el ✓ dentro,
   abajo a la derecha. */
.nb-caja { position: relative; }
.nb-caja .nb-nueva { resize: none; overflow: hidden; padding-right: 2.4rem; min-height: calc(1.5em + .5rem + 2px); }
.nb-caja .nb-btn-guardar { position: absolute; right: .25rem; bottom: .25rem; padding: 0 .4rem; line-height: 1.4; }
.nb-en-edicion .nb-nueva { border-color: var(--bs-warning); box-shadow: 0 0 0 .15rem rgba(var(--bs-warning-rgb), .2); }
.nb-editar { padding: 0 .35rem; line-height: 1.4; }
.nb-chip { font-size: .75rem; line-height: 1.3; padding: .05rem .5rem; border-radius: 999px;
           border: 1px solid var(--bs-border-color); background: var(--bs-light); color: var(--bs-body-color); }
.nb-chip:hover { background: var(--bs-secondary-bg); }
.nota-bitacora .nota-entrada { padding: .35rem 0; border-top: 1px solid var(--bs-border-color-translucent); overflow-wrap: anywhere; }
.nota-bitacora .nota-entrada:first-child { border-top: 0; padding-top: 0; }
.nota-bitacora .nota-sello { color: var(--bs-secondary-color); font-size: .8em; font-variant-numeric: tabular-nums; white-space: nowrap; margin-right: .25rem; }

/* --- Chips de elección de Visitas (panel del lead y /visitas/nueva) --- */
.seg-chip { font-size: .78rem; line-height: 1.3; padding: .18rem .6rem; border-radius: 999px; border: 1px solid #d5dbe4;
            background: #fff; color: #444; cursor: pointer; }
.seg-chip:hover { background: #f1f4f8; }
.seg-chip.on { background: #e7f0fb; border-color: #8fb4e6; color: #1d4f8f; }