/* =====================================================================
   NefroClinic · "Mi carnet" (portal del paciente)
   Colores del sistema NefroClinic: café #3C1F12, verde #22504E,
   verde claro #5BA8A5 (el del logo) y fondo #F1F5F9.
   Pensado para personas mayores y celulares sencillos:
   - letra grande (base 20 px), botones de 80 px de alto, alto contraste
   - una tarea por pantalla, etiquetas siempre visibles
   - sin librerías: carga rápido con datos móviles
   Contraste (WCAG AA): texto #172B35 sobre #F1F5F9 13.4:1; blanco sobre
   #22504E 9.0:1; blanco sobre #6B3A2A 9.3:1; #1A3F3D sobre #E6F0EF 9.9:1.
   ===================================================================== */
:root {
    --cafe: #3C1F12;
    --cafe-medio: #6B3A2A;
    --verde: #22504E;
    --verde-oscuro: #1A3F3D;
    --verde-claro: #5BA8A5;
    --verde-suave: #E6F0EF;
    --fondo: #F1F5F9;
    --texto: #172B35;
    --texto-2: #52636B;
    --borde: #D5DEE0;
    --borde-control: #7B8C94;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 125%; -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: var(--fondo); color: var(--texto);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
}
a { color: var(--verde); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, label:focus-within,
.archivo-oculto:focus-visible + label {
    outline: 4px solid var(--verde); outline-offset: 3px;
}

/* Encabezado con el logo (mismo degradado que el menú del sistema) */
.barra {
    background: linear-gradient(135deg, var(--cafe) 0%, var(--verde-oscuro) 100%); color: #fff;
    padding: .7rem 1rem; display: flex; align-items: center; gap: .7rem;
}
.barra img { width: 2.05rem; height: auto; display: block; }
.barra strong { font-size: 1.1rem; letter-spacing: .02em; }
.barra strong span { color: var(--verde-claro); }

.contenido { max-width: 34rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: .25rem 0 .25rem; }
h2 { font-size: 1.25rem; margin: 1.75rem 0 .75rem; }
h3 { font-size: 1.1rem; margin: 0 0 .5rem; color: var(--verde); }
.subtitulo { color: var(--texto-2); margin: 0 0 1.5rem; }
p { margin: 0 0 1rem; }

/* Botones grandes */
.boton {
    display: flex; align-items: center; justify-content: center; gap: .75rem;
    width: 100%; min-height: 4rem; padding: .75rem 1.25rem; margin: 0 0 1rem;
    border: 3px solid var(--verde); border-radius: 16px;
    background: var(--verde); color: #fff; font: inherit; font-size: 1.2rem; font-weight: 700;
    text-decoration: none; text-align: center; cursor: pointer;
}
.boton:hover { background: var(--verde-oscuro); border-color: var(--verde-oscuro); }
.boton svg { width: 1.6rem; height: 1.6rem; flex-shrink: 0; }
.boton--claro { background: #fff; color: var(--verde); }
.boton--claro:hover { background: var(--verde-suave); color: var(--verde-oscuro); }
.boton--acento { background: linear-gradient(135deg, var(--cafe), var(--cafe-medio)); border-color: var(--cafe); }
.boton--acento:hover { background: var(--cafe); border-color: var(--cafe); }
.boton--peligro { background: #fff; color: #991B1B; border-color: #B91C1C; }
.boton--peligro:hover { background: #FDECEC; }
.boton[disabled] { opacity: .75; cursor: wait; }
.enlace-volver { display: inline-flex; align-items: center; gap: .4rem; min-height: 3rem; font-weight: 700; text-decoration: none; margin-bottom: .5rem; }
.enlace-volver svg { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }

/* Mosaico de "Ver" (botones grandes en dos columnas) */
.mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.mosaico__boton {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
    min-height: 7rem; padding: .75rem .5rem; border: 2px solid var(--borde); border-radius: 16px;
    background: #fff; color: var(--texto); text-decoration: none; font-weight: 700; text-align: center; line-height: 1.25;
}
.mosaico__boton svg { width: 2.1rem; height: 2.1rem; color: var(--verde); flex-shrink: 0; }
.mosaico__boton:hover { background: #F3F8F7; border-color: var(--verde-claro); }
.mosaico__boton--ancho { grid-column: 1 / -1; flex-direction: row; min-height: 4.5rem; }

/* Campos */
.campo { margin: 0 0 1.5rem; }
.campo > label, .campo legend { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; }
.ayuda { display: block; color: var(--texto-2); font-size: .9rem; margin-top: .35rem; }
input[type="text"], input[type="tel"], input[type="datetime-local"] {
    width: 100%; min-height: 4rem; padding: .5rem 1rem;
    border: 3px solid var(--borde-control); border-radius: 14px; background: #fff; color: var(--texto);
    font: inherit; font-size: 1.3rem;
}
input.numero { font-size: 2rem; font-weight: 700; text-align: center; letter-spacing: .05em; }
textarea {
    display: block; width: 100%; min-height: 9rem; padding: .75rem 1rem;
    border: 3px solid var(--borde-control); border-radius: 14px; background: #fff; color: var(--texto);
    font: inherit; font-size: 1.1rem; line-height: 1.45; resize: vertical;
}
input:focus, textarea:focus { border-color: var(--verde); outline: none; box-shadow: 0 0 0 4px rgba(34, 80, 78, .3); }
.campo--error input, .campo--error textarea { border-color: #B91C1C; }
.error-campo { display: block; color: #991B1B; font-weight: 700; margin-top: .4rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1.5rem; }
legend { font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; padding: 0; }

/* Opciones grandes (radio) */
.opcion {
    display: flex; align-items: center; gap: .9rem;
    min-height: 3.75rem; padding: .6rem 1rem; margin-bottom: .6rem;
    background: #fff; border: 3px solid var(--borde); border-radius: 14px; cursor: pointer; font-weight: 600;
}
.opcion input { width: 1.6rem; height: 1.6rem; accent-color: var(--verde); flex-shrink: 0; margin: 0; }
.opcion:has(input:checked) { border-color: var(--verde); background: var(--verde-suave); }

details.otra-hora { margin: 0 0 1.5rem; }
details.otra-hora summary { cursor: pointer; font-weight: 700; color: var(--verde); min-height: 3rem; display: flex; align-items: center; }

/* Avisos */
.aviso { border-radius: 14px; padding: 1rem 1.1rem; margin: 0 0 1.25rem; border: 2px solid transparent; }
.aviso--error { background: #FDECEC; border-color: #F1A9A9; color: #991B1B; font-weight: 600; }
.aviso--ok    { background: #EAF7EE; border-color: #9AD3AE; color: #166534; }
.aviso--info  { background: var(--verde-suave); border-color: #9CC9C6; color: var(--verde-oscuro); }
.aviso--atencion { background: #FEF6E7; border-color: #F3C77A; color: #92400E; }
/* Título de un aviso (en su propia línea). Un <strong> dentro del texto sigue en línea. */
.aviso__titulo { display: block; font-size: 1.1rem; }

/* Tarjetas */
.tarjeta { background: #fff; border: 2px solid var(--borde); border-radius: 16px; padding: 1rem 1.1rem; margin: 0 0 1rem; }
.tarjeta h2 { margin-top: 0; }
.tarjeta__titulo { display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--verde); margin: 0 0 .35rem; }
.tarjeta__titulo svg { width: 1.4rem; height: 1.4rem; flex-shrink: 0; }
.tarjeta--cita { border-color: var(--verde-claro); border-left-width: 8px; }
.cita__fecha { font-size: 1.25rem; font-weight: 800; margin: 0 0 .15rem; }
.cita__hora { font-size: 1.6rem; font-weight: 800; color: var(--verde); margin: 0 0 .15rem; }
.tarjeta--pendiente { border-color: #D9B99A; background: #FBF5EF; }
.tarjeta--pendiente h2 { color: var(--cafe-medio); }
.dato { padding: .5rem 0; border-bottom: 1px solid #E5ECEE; }
.dato:last-child { border-bottom: 0; }
.dato dt { font-size: .85rem; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .04em; }
.dato dd { margin: 0; font-size: 1.05rem; }
dl { margin: 0; }
.tarjeta--emergencia { border-color: #F1A9A9; background: #FDECEC; }
.tarjeta--emergencia h2 { color: #991B1B; }
.tarjeta--alergia { border-color: #F1A9A9; }
.lista { margin: 0; padding-left: 1.25rem; }
.lista li { margin-bottom: .5rem; }

/* Pantallas de solo consulta (medicinas y exámenes): más compactas que las
   de anotar; solo información general. Letra de 16 a 21 px. */
.tarjeta--compacta { padding: .5rem 1rem; }
.tarjeta--compacta > h2 { font-size: 1.1rem; margin: .5rem 0 .2rem; }
.tarjeta--compacta > .ayuda { margin: 0 0 .4rem; }
.aviso--compacto { font-size: .9rem; padding: .7rem .9rem; }
.lista--compacta { margin-bottom: .4rem; }
.lista--compacta li { margin-bottom: .15rem; }

/* Medicinas: una lista; cada medicina en uno o dos renglones */
.medicinas { list-style: none; margin: 0; padding: 0; }
.medicina { padding: .6rem 0; border-bottom: 1px solid #E5ECEE; }
.medicina:last-child { border-bottom: 0; }
.medicina__nombre { display: flex; align-items: flex-start; gap: .5rem; font-size: 1.05rem; line-height: 1.3; margin: 0; }
.medicina__nombre svg { width: 1.2rem; height: 1.2rem; color: var(--verde); flex-shrink: 0; margin-top: .1rem; }
.medicina__presentacion { font-weight: 600; color: var(--texto-2); }
.medicina__toma { margin: .15rem 0 0 1.7rem; font-size: .95rem; }
.medicina__marca { margin: .1rem 0 0 1.7rem; font-size: .8rem; color: var(--texto-2); }

/* Resultados de exámenes: los grupos van dentro de una sola tarjeta */
.resultados__grupo { font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--verde); margin: .9rem 0 .1rem; }
.resultados__grupo:first-child { margin-top: .35rem; }
.resultado { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .3rem 0; border-bottom: 1px solid #E5ECEE; }
.resultado:last-child { border-bottom: 0; }
.resultado dt { font-size: .95rem; }
.resultado dd { margin: 0; font-size: 1.05rem; font-weight: 800; text-align: right; white-space: nowrap; }
/* Tableta o celular acostado: dos columnas de resultados */
@media (min-width: 36rem) {
    .resultados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.75rem; }
    .resultado:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

/* Notas para el doctor */
.nota { padding: .6rem 0; border-bottom: 1px solid #E5ECEE; }
.nota:last-child { border-bottom: 0; }
.nota__texto { margin: 0 0 .2rem; overflow-wrap: anywhere; }
.nota__borrar { display: inline-flex; align-items: center; min-height: 2.5rem; font-weight: 700; }

/* Archivos */
.archivo { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding: .35rem 0; text-decoration: none; color: var(--texto); }
.archivo svg { width: 2rem; height: 2rem; color: var(--verde); flex-shrink: 0; }
.archivo strong { display: block; color: var(--verde); text-decoration: underline; }
.tarjeta > .archivo + .archivo { border-top: 1px solid #E5ECEE; }
.archivo-oculto { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.vista-previa { margin: 0 0 1rem; }
.vista-previa img, .miniatura { display: block; max-width: 100%; max-height: 22rem; margin: 0 auto 1rem; border: 2px solid var(--borde); border-radius: 12px; }
.vista-previa__archivo { font-weight: 700; background: #fff; border: 2px solid var(--borde); border-radius: 12px; padding: 1rem; overflow-wrap: anywhere; }

/* Registros */
.registro { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid #E5ECEE; }
.registro:last-child { border-bottom: 0; }
.registro__valor { font-size: 1.3rem; font-weight: 800; }
.registro__detalle { color: var(--texto-2); font-size: .9rem; display: block; }
.meta { display: inline-block; font-size: .85rem; font-weight: 700; border-radius: 999px; padding: .1rem .6rem; margin-top: .25rem; }
.meta--dentro { background: #EAF7EE; color: #166534; }
.meta--arriba, .meta--abajo { background: #FEF6E7; color: #92400E; }
.dia { font-weight: 800; margin: 1.25rem 0 .25rem; }
.grande { font-size: 2.4rem; font-weight: 800; line-height: 1.1; }
.centrado { text-align: center; }
.icono-ok { width: 4.5rem; height: 4.5rem; color: #15803D; }

.telefono { display: flex; align-items: center; gap: .6rem; font-size: 1.2rem; font-weight: 700; text-decoration: none; min-height: 3rem; }
.telefono svg { width: 1.5rem; height: 1.5rem; }
.pie { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 2px solid var(--borde); color: var(--texto-2); font-size: .9rem; }
.boton-texto { background: none; border: 0; padding: .5rem 0; font: inherit; color: var(--verde); font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 3rem; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }