/* Estilos del sistema veterinaria (estandar OneMind). Movil primero: se usa en el
   mostrador y en la sala desde un celular (RN-60-32). */

:root {
    --primary-blue: #2a9d8f;
    /* El mismo color en componentes: Bootstrap pide los canales sueltos para las sombras. */
    --primary-blue-rgb: 42, 157, 143;
    --accent-yellow: #ffc107;
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-border: rgba(255, 255, 255, 0.4);

    /* Bootstrap entero toma el color del tema: primario y enlaces (estandar §8). */
    --bs-primary: var(--primary-blue);
    --bs-primary-rgb: var(--primary-blue-rgb);
    --bs-link-color: var(--primary-blue);
    --bs-link-color-rgb: var(--primary-blue-rgb);
    --bs-link-hover-color: #21867a;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #f5f6f8;
}

/* ============ Navbar y botonera inferior movil ============ */

.navbar-veterinaria {
    background-color: var(--primary-blue);
}

.navbar-veterinaria .navbar-brand,
.navbar-veterinaria .nav-link,
.navbar-veterinaria .navbar-text {
    color: #fff;
}

.navbar-veterinaria .nav-link:hover {
    color: var(--accent-yellow);
}

.badge-sucursal {
    background-color: var(--accent-yellow);
    color: var(--primary-blue);
}

/* Botonera inferior fija en movil (tablero vertical del PDF, RN-60-32) */
.botonera-movil {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background-color: var(--primary-blue);
    display: flex;
    justify-content: space-around;
    padding: 0.35rem 0;
    border-top: 2px solid var(--accent-yellow);
}

.botonera-movil a {
    color: #fff;
    text-decoration: none;
    font-size: 0.75rem;
    text-align: center;
    flex: 1 1 0;
}

.botonera-movil a .icono {
    display: block;
    font-size: 1.2rem;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .botonera-movil { display: none; }
    body { margin-bottom: 20px; }
}

/* ============ Semaforo de pago (RN-00-19) ============ */

.fila-semaforo-Rojo { border-left: 6px solid #dc3545; background-color: #fdecea; }
.fila-semaforo-Amarillo { border-left: 6px solid var(--accent-yellow); background-color: #fff8e1; }
.fila-semaforo-Verde { border-left: 6px solid #198754; background-color: #e8f5e9; }
.fila-semaforo-SinColor { border-left: 6px solid #d1d5db; }

/* ============ Formularios (estandar OneMind) ============ */

.form-control, .form-select, textarea.form-control, input.form-control {
    border: 1px solid #9ca3af;
    background-color: #fff;
    padding: 0.1875rem 0.375rem;
}

.form-control:hover, .form-select:hover { border-color: #6b7280; }

.form-control:focus, .form-select:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-blue-rgb), 0.2);
}

.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.input-group-text { border: 1px solid #9ca3af; background-color: #f3f4f6; padding: 0.1875rem 0.375rem; }
.form-check-input { border: 2px solid #9ca3af; }
.btn { padding: 0.1875rem 0.375rem; }
.btn-sm { padding: 0.125rem 0.25rem; }
.btn-lg { padding: 0.375rem 0.875rem; font-size: 1rem; }

/* SIN padding propio (antipatron del estandar §8: pisaria a .btn-sm). El color va por
   las variables --bs-btn-* para que hover/active/disabled tambien queden en el tema. */
.btn-primary {
    --bs-btn-bg: var(--primary-blue);
    --bs-btn-border-color: var(--primary-blue);
    --bs-btn-hover-bg: #21867a;
    --bs-btn-hover-border-color: #21867a;
    --bs-btn-active-bg: #1d7468;
    --bs-btn-active-border-color: #1d7468;
    --bs-btn-disabled-bg: var(--primary-blue);
    --bs-btn-disabled-border-color: var(--primary-blue);
    --bs-btn-focus-shadow-rgb: var(--primary-blue-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--primary-blue);
    --bs-btn-border-color: var(--primary-blue);
    --bs-btn-hover-bg: var(--primary-blue);
    --bs-btn-hover-border-color: var(--primary-blue);
    --bs-btn-active-bg: #1d7468;
    --bs-btn-active-border-color: #1d7468;
    --bs-btn-focus-shadow-rgb: var(--primary-blue-rgb);
}

.validation-summary-valid { display: none !important; }

/* Label horizontal al lado del input, con ':' automatico */
.form-label { color: #374151; font-weight: 500; margin-bottom: 0; }
.form-label::after { content: ':'; margin-left: 0.15rem; }

form .row > [class*="col-"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    column-gap: 0.5rem;
    row-gap: 0.15rem;
}

form .row > [class*="col-"] > .form-label {
    flex: 0 0 11rem;
    width: 11rem;
    overflow-wrap: anywhere;
}

form .row > [class*="col-"] > .form-control,
form .row > [class*="col-"] > .form-select,
form .row > [class*="col-"] > .input-group,
form .row > [class*="col-"] > textarea {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
}

form .row > [class*="col-"] > *:not(.form-label):not(.form-control):not(.form-select):not(.input-group):not(textarea):not(input):not(select) {
    flex: 0 0 100%;
    min-width: 0;
}

@media (max-width: 575.98px) {
    form .row > [class*="col-"] { flex-direction: column; align-items: stretch; }
    form .row > [class*="col-"] > .form-label { min-width: 0; }
}

/* Maximo 2 columnas iguales en desktop; textarea fuerza 1 columna */
@media (min-width: 768px) {
    form .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; }
    form:has(textarea) .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }

    /* Panel flotante estandar (~500px): no entran dos columnas. La etiqueta de 11rem
       dejaba al input en ~50px y ademas de distinto ancho segun el col-N del markup.
       Una columna por fila: campos simetricos y con espacio real. Los dialogos anchos
       (modal-lg / modal-xl) conservan las dos columnas. */
    .modal-dialog:not(.modal-lg):not(.modal-xl):not(.modal-fullscreen) form .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Asterisco amarillo de campos obligatorios (lo inyecta site.js) */
.campo-obligatorio-asterisco { color: var(--accent-yellow); margin-left: 0.25rem; }

/* Margenes de formularios al 25% del default Bootstrap */
form .row { --bs-gutter-x: 0.375rem; --bs-gutter-y: 0.375rem; }
form .row.g-3 { --bs-gutter-x: 0.25rem; --bs-gutter-y: 0.25rem; }
form .mb-3 { margin-bottom: 0.25rem !important; }
form .mt-3 { margin-top: 0.25rem !important; }
form .mb-4 { margin-bottom: 0.375rem !important; }
form .mt-4 { margin-top: 0.375rem !important; }
form .my-4 { margin-top: 0.375rem !important; margin-bottom: 0.375rem !important; }
form .gap-3 { gap: 0.25rem !important; }

/* Tablas del tablero: legibles en pantallas angostas */
.tabla-tablero td, .tabla-tablero th { vertical-align: middle; }

.login-card {
    max-width: 380px;
    margin: 8vh auto;
}

/* Glassmorphism y Estilo Vidrioso */
.glass-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

.glass-nav {
    background: rgba(18, 69, 62, 0.92) !important; /* Verde pino oscuro traslúcido para máximo contraste de texto blanco */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.text-gradient-green {
    background: linear-gradient(135deg, #12453e 0%, #2a9d8f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Sombreado de texto para legibilidad extrema */
.text-shadow-premium {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ============ SweetAlert2 ============ */

/* Con buttonsStyling:false (ver site.js) los botones del modal son .btn de Bootstrap y
   heredan el tema. Solo falta el espaciado, que antes ponia el propio SweetAlert. */
.swal2-actions {
    gap: 0.5rem;
}

.swal2-actions .btn {
    padding: 0.3rem 0.75rem;
}


/* ============================================================
   REJILLA DE FORMULARIO
   La grilla global estira cada control hasta el borde (flex: 1 1 0)
   y, si el formulario tiene un textarea, lo pasa entero a una
   columna: en un monitor ancho eso deja un campo de peso de
   1600px. Aca los campos van en celdas IGUALES, con la etiqueta
   arriba, y la cantidad de columnas la decide el ANCHO DEL
   CONTENEDOR, no el de la ventana.

   Por que container queries y no media queries: la misma rejilla
   se usa en tarjetas a media pagina y en tarjetas a todo el ancho.
   Ademas `container-type: inline-size` aisla el ancho del
   contenedor de su contenido, y eso es lo que evita que la
   rejilla infle el layout: con `minmax(12rem, 1fr)` a secas, el
   ancho intrinseco de dos rejillas lado a lado empujaba la
   pagina entera y tapaba la tarjeta de la derecha.

   Se activa con .formulario-rejilla dentro de un .rejilla-host;
   no toca al resto del app.
   ============================================================ */

.rejilla-host,
.mascota-bloque,
.detalle-mascota { container-type: inline-size; }

.formulario-rejilla {
    display: grid;
    /* min() deja que la columna baje de 12rem en contenedores angostos sin
       reclamar ese minimo como ancho intrinseco. */
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
    gap: 0.6rem 1rem;
    max-width: 70rem;
    align-items: start;
}

/* Tope de cinco columnas: mas que eso deja los campos demasiado angostos. */
@container (min-width: 62rem) {
    .formulario-rejilla { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.formulario-rejilla > .campo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.formulario-rejilla > .campo > .form-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 0.2rem;
    white-space: nowrap;
}

/* Con la etiqueta arriba, el ':' del layout horizontal sobra. */
.formulario-rejilla > .campo > .form-label::after { content: ''; margin-left: 0; }

.formulario-rejilla > .campo > .form-control,
.formulario-rejilla > .campo > .form-select,
.formulario-rejilla > .campo > .input-group,
.formulario-rejilla > .campo > textarea { width: 100%; }

/* Texto de ayuda bajo el campo, con alto fijo para que las celdas de una
   misma fila no se descuadren cuando solo algunas lo tienen. */
.formulario-rejilla > .campo > .ayuda-campo {
    font-size: 0.7rem;
    color: #6b7280;
    margin-top: 0.15rem;
    min-height: 1rem;
}

/* Celdas que ocupan la fila entera: textarea, casillas de servicios, buscadores. */
.formulario-rejilla > .campo-fila { grid-column: 1 / -1; }

@media (max-width: 575.98px) {
    .formulario-rejilla { grid-template-columns: 1fr; }
}

/* Bloque de una mascota dentro de la visita. */
.mascota-bloque { background-color: #fff; }
.mascota-bloque + .mascota-bloque { margin-top: 0.5rem; }

/* Encabezado del paciente en los modulos clinicos: queda pegado arriba mientras se
   registra, para no tener que retroceder a ver de que paciente se trata. El desplazamiento
   vertical lo pone --alto-barra-superior, que site.js mide de la barra del layout: fijarlo
   a mano se rompe cuando la barra cambia de alto (movil, dos lineas de titulo). */
.cabecera-paciente {
    position: sticky;
    top: var(--alto-barra-superior, 0px);
    z-index: 1005;
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.05);
    padding: 0.5rem 0 0.4rem;
    margin-bottom: 0.75rem;
}

.cabecera-paciente .datos-paciente {
    column-gap: 1rem;
    row-gap: 0.15rem;
}

/* En pantallas bajas el encabezado no puede comerse el formulario: se limita y, si hace
   falta, el propio encabezado hace scroll. */
@media (max-height: 700px) {
    .cabecera-paciente { max-height: 30vh; overflow-y: auto; }
}