@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Nunito+Sans:wght@400;600;700;800&display=swap');

:root {
    --azul-claro: #6FC3F0;
    --azul-medio: #2E86D8;
    --azul-oscuro: #123E7A;
    --azul-texto: #0D2C57;
    --gris-fondo: #F4F7FB;
    --gris-borde: #DCE4EE;
    --gris-texto: #4A5A6C;
    --blanco: #FFFFFF;
    --verde-ok: #2E9E5B;
    --rojo-alerta: #C43D3D;
    --naranja-aviso: #C9860F;
    --radio: 10px;
    --sombra: 0 2px 10px rgba(13, 44, 87, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--gris-fondo);
    color: var(--azul-texto);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--azul-medio); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Cabecera --- */

.cabecera {
    background: var(--blanco);
    border-bottom: 1px solid var(--gris-borde);
    box-shadow: var(--sombra);
    position: sticky;
    top: 0;
    z-index: 20;
}

.cabecera-interior {
    max-width: 1800px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.marca {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.marca img { height: 56px; width: auto; }

nav.principal {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

nav.principal a {
    padding: 8px 10px;
    border-radius: var(--radio);
    color: var(--gris-texto);
    font-weight: 600;
    font-size: 0.86rem;
    white-space: nowrap;
}

nav.principal a:hover, nav.principal a.activo {
    background: linear-gradient(135deg, var(--azul-claro), var(--azul-medio));
    color: var(--blanco);
    text-decoration: none;
}

.usuario-sesion {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--gris-texto);
    flex-shrink: 0;
}

/* Un nombre de usuario largo no debe robarle sitio al menu de navegacion -
   se trunca con puntos suspensivos en vez de ensanchar esta columna. */
.usuario-sesion .nombre {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-menu-movil {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--azul-oscuro);
    cursor: pointer;
    padding: 4px 8px;
}

/* --- Contenido --- */

main.contenido {
    max-width: 1800px;
    margin: 0 auto;
    padding: 24px 20px 60px;
}

h2.titulo-pagina {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--azul-oscuro);
    font-size: 1.6rem;
    margin: 0 0 4px;
}

p.subtitulo-pagina {
    color: var(--gris-texto);
    margin: 0 0 22px;
}

.tarjeta {
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 22px;
    margin-bottom: 20px;
    border: 1px solid var(--gris-borde);
}

.tarjeta h3 {
    margin-top: 0;
    color: var(--azul-oscuro);
    font-size: 1.1rem;
}

.rejilla-tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat {
    background: var(--blanco);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 18px 20px;
    border-left: 4px solid var(--azul-medio);
}

.stat .num { font-size: 1.9rem; font-weight: 800; color: var(--azul-oscuro); }
.stat .label { font-size: 0.85rem; color: var(--gris-texto); font-weight: 600; }
.stat.alerta { border-left-color: var(--naranja-aviso); }
.stat.alerta .num { color: var(--naranja-aviso); }
/* Tarjeta-filtro (p.ej. en Cobros) que coincide con el filtro aplicado ahora
   mismo al listado de abajo - se marca con un contorno grueso ademas del
   texto "✓" en su etiqueta, para que se note incluso sin distinguir bien
   los colores. */
.stat-activa { outline: 3px solid var(--azul-oscuro); outline-offset: -1px; background: var(--gris-fondo); }

/* --- Formularios --- */

form.formulario { display: flex; flex-direction: column; gap: 14px; }

.fila-formulario {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--azul-texto);
}

input, select, textarea {
    font-family: inherit;
    font-size: 0.95rem;
    padding: 10px 12px;
    border: 1px solid var(--gris-borde);
    border-radius: 8px;
    background: var(--gris-fondo);
    color: var(--azul-texto);
    width: 100%;
}

/* Selects pequeños dentro de tablas (p.ej. cambiar el estado de una cita
   desde Cobros o la ficha del paciente) - sin un ancho minimo, dentro de un
   flex/celda estrecha el navegador puede llegar a comprimirlo hasta dejar
   visible solo la flecha, sin el texto de la opcion elegida. */
.campo-estado-cita {
    font-size: 0.78rem;
    width: auto;
    min-width: 130px;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--azul-medio);
    background: var(--blanco);
    box-shadow: 0 0 0 3px rgba(46, 134, 216, 0.15);
}

textarea { resize: vertical; min-height: 80px; }

.acciones-formulario {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 4px;
}

button, .boton {
    font-family: inherit;
    cursor: pointer;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 0.92rem;
    background: linear-gradient(135deg, var(--azul-claro), var(--azul-medio));
    color: var(--blanco);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

button:hover, .boton:hover { opacity: 0.92; text-decoration: none; }

.boton.secundario {
    background: var(--blanco);
    color: var(--azul-medio);
    border: 1px solid var(--azul-medio);
}

.boton.peligro {
    background: var(--rojo-alerta);
}

.boton.pequeno { padding: 6px 12px; font-size: 0.82rem; }

/* --- Tablas --- */

/* position:relative no cambia nada visualmente por si solo - solo habilita
   que un hijo con position:absolute (p.ej. un formulario de edicion que
   necesita mas ancho del que le da su celda) se posicione respecto a todo
   el ancho de la tabla en vez de quedarse encajonado en su columna. */
.tabla-scroll { overflow-x: auto; position: relative; }

table.datos {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}

table.datos th {
    text-align: left;
    padding: 10px 12px;
    background: var(--azul-oscuro);
    color: var(--blanco);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

table.datos th:first-child { border-top-left-radius: 8px; }
table.datos th:last-child { border-top-right-radius: 8px; }

table.datos td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--gris-borde);
    vertical-align: middle;
    white-space: nowrap;
}

/* Excepcion para celdas con texto libre largo (notas, conceptos...) donde
   sigue interesando que el texto haga salto de linea en vez de desbordar. */
table.datos td.celda-ajustable { white-space: normal; }

/* El nowrap de las celdas no debe heredarse dentro de formularios/avisos
   desplegados en linea (p.ej. el formulario de "Cobrar") - ahi si interesa
   que el texto haga salto de linea con normalidad. */
table.datos td form,
table.datos td .mensaje-error,
table.datos td details[open] { white-space: normal; }

/* Cuando un <details> se despliega dentro de una celda (p.ej. "Cobrar" en
   Gestion de cobros), la fila crece de alto - pero con vertical-align:middle
   el resto de celdas de esa misma fila quedan centradas respecto a esa
   nueva altura, "flotando" lejos del contenido desplegado en vez de quedar
   alineadas arriba con el. Se corrige alineando toda la fila arriba en ese caso. */
table.datos tr:has(details[open]) td { vertical-align: top; }

table.datos tr:hover td { background: rgba(46, 134, 216, 0.05); }

/* Tablas con muchas columnas (p.ej. Notas de venta): filas mas ajustadas
   para que quepan mas registros sin necesitar scroll lateral. */
table.datos.tabla-compacta th,
table.datos.tabla-compacta td {
    padding: 6px 8px;
    font-size: 0.82rem;
}

/* Fila de acciones (Cobrar/Editar/Ver.../Deshacer) en una unica linea debajo
   de la fila de datos, en vez de en su propia columna a la derecha - evita
   que la tabla se ensanche tanto que haga falta desplazarse para ver los
   botones. */
table.datos tr.fila-acciones td {
    padding: 4px 8px 10px;
    background: var(--gris-fondo);
    white-space: normal;
}
table.datos tr.fila-acciones .acciones-nota {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.num-derecha { text-align: right; }

/* --- Etiquetas de estado --- */

.etiqueta {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.etiqueta.programada { background: #E4EEFB; color: var(--azul-medio); }
.etiqueta.realizada { background: #E1F5E9; color: var(--verde-ok); }
.etiqueta.cancelada { background: #FBE4E4; color: var(--rojo-alerta); }
.etiqueta.no_asistio { background: #FBEEDA; color: var(--naranja-aviso); }
.etiqueta.cobrado { background: #E1F5E9; color: var(--verde-ok); }
.etiqueta.pendiente { background: #FBEEDA; color: var(--naranja-aviso); }

.mensaje-error {
    background: #FBE4E4;
    color: var(--rojo-alerta);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: 600;
}

.mensaje-ok {
    background: #E1F5E9;
    color: var(--verde-ok);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-weight: 600;
}

.pestanas {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--gris-borde);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.pestanas a {
    padding: 9px 16px;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--gris-texto);
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.pestanas a.activa {
    color: var(--azul-oscuro);
    border-bottom-color: var(--azul-medio);
    text-decoration: none;
}

.buscador {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.buscador input, .buscador select { max-width: 260px; }

/* Fila de campos que debe mantenerse en una sola linea en pantallas anchas
   (para no romper el grupo, p.ej. separando el boton "Filtrar" de sus
   campos), pero que en movil tiene que poder envolver - si no, el ultimo
   campo se sale del viewport y queda inaccesible (no hay hueco para
   desplazarse hasta el, a diferencia de una tabla con scroll horizontal
   propio). Ver #form-filtros en cobros.php. */
.filtros-fila { flex-wrap: wrap; }
@media (min-width: 700px) {
    .filtros-fila { flex-wrap: nowrap; }
}

.vacio {
    text-align: center;
    padding: 40px 20px;
    color: var(--gris-texto);
}

/* --- Ficha de datos (par etiqueta/valor, p.ej. datos del paciente) --- */

.ficha-datos .fila {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gris-borde);
}

.ficha-datos .fila:last-child { border-bottom: none; }

.ficha-datos .etiqueta-campo {
    flex: 0 0 180px;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--azul-medio);
}

.ficha-datos .valor-campo {
    flex: 1;
    color: var(--azul-texto);
    word-break: break-word;
}

@media (max-width: 560px) {
    .ficha-datos .fila { flex-direction: column; gap: 2px; }
    .ficha-datos .etiqueta-campo { flex-basis: auto; }
}

/* --- Login --- */

.login-wrap {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-tarjeta {
    background: var(--blanco);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(13, 44, 87, 0.15);
    padding: 40px 34px;
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.login-tarjeta img.logo-login { width: 100%; max-width: 260px; height: auto; margin-bottom: 24px; }

.login-tarjeta form { text-align: left; }
.login-tarjeta button { width: 100%; justify-content: center; margin-top: 6px; }

footer.pie {
    text-align: center;
    padding: 20px;
    color: var(--gris-texto);
    font-size: 0.78rem;
}

/* --- Responsive: iPhone / móvil --- */

@media (max-width: 780px) {
    .btn-menu-movil { display: block; }

    nav.principal {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--blanco);
        flex-direction: column;
        padding: 8px 16px 16px;
        box-shadow: var(--sombra);
        border-bottom: 1px solid var(--gris-borde);
    }

    nav.principal.abierto { display: flex; }

    .cabecera-interior { position: relative; }

    .usuario-sesion span.nombre { display: none; }

    main.contenido { padding: 16px 14px 50px; }

    .fila-formulario { grid-template-columns: 1fr; }

    table.datos { font-size: 0.85rem; }

    .rejilla-tarjetas { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .rejilla-tarjetas { grid-template-columns: 1fr; }
    .marca-texto h1 { font-size: 1.05rem; }
    .login-tarjeta { padding: 30px 22px; }
}

/* Cuadro de busqueda global del menu (buscar.php): estrecho para no ensanchar
   la cabecera; al enfocarlo crece hacia la izquierda por encima del menu. */
.busqueda-global { position: relative; width: 112px; height: 34px; margin: 0 0 0 4px; flex: 0 0 auto; }
.busqueda-global input {
    position: absolute;
    right: 0; top: 0;
    width: 112px;
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 20px;
    transition: width .15s ease;
}
.busqueda-global input:focus { width: 240px; z-index: 30; }
@media (max-width: 899px) {
    .busqueda-global { width: 100%; margin: 8px 0 0; }
    .busqueda-global input { position: static; width: 100%; }
    .busqueda-global input:focus { width: 100%; }
}