/*
 * Estilo de las páginas públicas (portal de familia, acceso de profesores, expediente).
 * Mismo aire que el panel /admin (tema tipo Asana de Neurobyte Proyectos): Figtree, acento coral,
 * barra oscura, tarjetas redondeadas. CSS propio servido en local: sin Tailwind CDN ni otros terceros.
 */

:root {
    --pb-coral: #f06a6a;
    --pb-coral-oscuro: #e05252;
    --pb-coral-suave: #fdeceb;
    --pb-oscuro: #1e1f21;
    --pb-oscuro-hover: rgb(255 255 255 / .08);
    --pb-texto: #1e1f21;
    --pb-texto-2: #57534e;
    --pb-tenue: #8a8580;
    --pb-fondo: #f9f8f8;
    --pb-borde: #e8e6e4;
    --pb-borde-fuerte: #d6d3d1;
    --pb-radio: 14px;
    --pb-sombra: 0 1px 2px rgb(30 31 33 / .04);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Figtree', ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--pb-texto);
    background: var(--pb-fondo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; }
img, svg { display: block; }

/* ---------- Marca ---------- */
.pb-marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; min-width: 0; }
.pb-marca svg { width: 1.75rem; height: 1.75rem; flex: none; }
.pb-marca-texto { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pb-marca-texto span { font-weight: 400; opacity: .7; }

/* ---------- Páginas simples (login, acceso, caducado) ---------- */
.pb-simple {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background:
        radial-gradient(1200px 600px at 10% -10%, #fde3e1 0%, transparent 60%),
        radial-gradient(900px 500px at 110% 110%, #fff1dc 0%, transparent 55%),
        var(--pb-fondo);
}
.pb-simple-card {
    width: 100%;
    max-width: 26rem;
    background: #fff;
    border: 1px solid var(--pb-borde);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgb(30 31 33 / .08);
    padding: 2.25rem 2rem 2rem;
}
.pb-simple-card .pb-marca { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.pb-simple-card .pb-marca svg { width: 2.25rem; height: 2.25rem; }
.pb-centro { text-align: center; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pb-coral-oscuro); margin-bottom: .35rem; }
.pb-simple-card h1 { text-align: center; font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: .4rem; }
.pb-simple-card .pb-intro { text-align: center; font-size: .92rem; color: var(--pb-texto-2); margin-bottom: 1.6rem; }
.pb-simple-icono { width: 3rem; height: 3rem; border-radius: 9999px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; background: #fef3c7; color: #b45309; }
.pb-simple-icono svg { width: 1.5rem; height: 1.5rem; }

/* ---------- Formularios ---------- */
.pb-form { display: grid; gap: 1rem; }
.pb-form-2 { display: grid; gap: .75rem; }
@media (min-width: 48rem) { .pb-form-2 { grid-template-columns: 1fr 1fr; } .pb-form-2 .pb-ancho { grid-column: 1 / -1; } }
.pb-campo { display: grid; gap: .35rem; }
.pb-label { font-size: .85rem; font-weight: 600; color: var(--pb-texto); }
.pb-input {
    width: 100%;
    font: inherit;
    font-size: .92rem;
    color: var(--pb-texto);
    background: #fff;
    border: 1px solid var(--pb-borde-fuerte);
    border-radius: 10px;
    padding: .6rem .8rem;
    transition: border-color .15s, box-shadow .15s;
}
.pb-input::placeholder { color: var(--pb-tenue); }
.pb-input:focus { outline: none; border-color: var(--pb-coral); box-shadow: 0 0 0 3px rgb(240 106 106 / .18); }
textarea.pb-input { resize: vertical; min-height: 4.5rem; }
select.pb-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; background-size: 1rem; padding-right: 2.2rem; }
input[type=file].pb-input { padding: .45rem .6rem; }
input[type=file].pb-input::file-selector-button { font: inherit; font-size: .85rem; font-weight: 600; border: 0; border-radius: 8px; background: var(--pb-coral-suave); color: var(--pb-coral-oscuro); padding: .35rem .8rem; margin-right: .75rem; cursor: pointer; }
.pb-check { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--pb-texto-2); }
.pb-check input { width: 1rem; height: 1rem; accent-color: var(--pb-coral); }
.pb-error-campo { font-size: .82rem; color: #dc2626; }

.pb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    background: var(--pb-coral);
    border: 0;
    border-radius: 10px;
    padding: .62rem 1.1rem;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s;
}
.pb-btn:hover { background: var(--pb-coral-oscuro); }
.pb-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgb(240 106 106 / .3); }
.pb-btn-bloque { width: 100%; }
.pb-btn-enlace { font: inherit; font-size: .88rem; color: var(--pb-tenue); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.pb-btn-enlace:hover { color: var(--pb-texto); }

.pb-aviso { border-radius: 10px; padding: .75rem 1rem; font-size: .9rem; }
.pb-aviso-error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.pb-aviso-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }

/* ---------- Selector de hijos ---------- */
.pb-opciones { display: grid; gap: .6rem; }
.pb-opcion { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border: 1px solid var(--pb-borde); border-radius: 12px; text-decoration: none; transition: border-color .15s, background .15s; }
.pb-opcion:hover { border-color: var(--pb-coral); background: #fffafa; }
.pb-opcion-nombre { font-weight: 600; }
.pb-opcion-sub { display: block; font-size: .82rem; color: var(--pb-tenue); }
.pb-opcion-flecha { margin-left: auto; color: var(--pb-tenue); }
.pb-opcion-flecha svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Avatar con iniciales ---------- */
.pb-avatar { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; color: #fff; background: var(--pb-coral); }
.pb-avatar-grande { width: 4rem; height: 4rem; font-size: 1.4rem; }

/* ---------- Barra superior (portal y expediente) ---------- */
.pb-nav { position: sticky; top: 0; z-index: 50; background: var(--pb-oscuro); color: #e8e6e3; }
.pb-nav-in { max-width: 72rem; margin: 0 auto; padding: 0 1rem; height: 3.75rem; display: flex; align-items: center; gap: 1rem; }
.pb-nav .pb-marca-texto { color: #fff; }
.pb-nav-paciente { color: #9d9a97; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pb-nav-paciente::before { content: '/'; margin-right: .6rem; opacity: .5; }
.pb-nav-links { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.pb-nav-link, .pb-nav-links summary {
    display: inline-flex; align-items: center; gap: .3rem;
    font: inherit; font-size: .88rem; font-weight: 500; color: #e8e6e3;
    background: none; border: 0; border-radius: 8px; padding: .45rem .7rem;
    text-decoration: none; cursor: pointer; white-space: nowrap;
}
.pb-nav-link:hover, .pb-nav-links summary:hover { background: var(--pb-oscuro-hover); }
.pb-nav-links summary { list-style: none; }
.pb-nav-links summary::-webkit-details-marker { display: none; }
.pb-nav-links summary svg { width: .85rem; height: .85rem; }
.pb-nav-salir { border: 1px solid rgb(255 255 255 / .18); margin-left: .35rem; }
.pb-menu { position: relative; }
.pb-menu-panel { position: absolute; right: 0; top: calc(100% + .35rem); width: 15rem; background: #fff; color: var(--pb-texto); border: 1px solid var(--pb-borde); border-radius: 12px; box-shadow: 0 10px 30px rgb(30 31 33 / .12); padding: .35rem; }
.pb-menu-panel a { display: block; padding: .5rem .7rem; border-radius: 8px; font-size: .88rem; text-decoration: none; }
.pb-menu-panel a:hover { background: var(--pb-fondo); }
.pb-solo-escritorio { display: none; }
@media (min-width: 48rem) { .pb-solo-escritorio { display: inline-flex; } }

/* Navegación secundaria en móvil: fila desplazable bajo la barra */
.pb-subnav { background: var(--pb-oscuro); border-top: 1px solid rgb(255 255 255 / .06); overflow-x: auto; scrollbar-width: none; }
.pb-subnav::-webkit-scrollbar { display: none; }
.pb-subnav-in { display: flex; gap: .15rem; padding: .35rem .75rem; }
@media (min-width: 48rem) { .pb-subnav { display: none; } }

/* ---------- Contenido ---------- */
.pb-main { max-width: 72rem; margin: 0 auto; padding: 2rem 1rem 3rem; display: grid; gap: 2.75rem; }
.pb-tarjeta { background: #fff; border: 1px solid var(--pb-borde); border-radius: var(--pb-radio); box-shadow: var(--pb-sombra); }
.pb-tarjeta-pad { padding: 1.25rem 1.35rem; }

/* Cabecera del paciente */
.pb-hero { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; padding: 1.6rem 1.75rem; }
.pb-hero-datos { flex: 1 1 18rem; min-width: 0; display: flex; gap: 1rem; align-items: center; }
.pb-hero h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.pb-hero-sub { color: var(--pb-texto-2); font-size: .95rem; margin-top: .2rem; }
.pb-hero-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.pb-notas { flex: 1 1 18rem; background: var(--pb-fondo); border: 1px solid var(--pb-borde); border-radius: 12px; padding: 1rem 1.15rem; }
.pb-notas h3 { display: flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #b45309; margin-bottom: .45rem; }
.pb-notas h3::before { content: ''; width: .45rem; height: .45rem; border-radius: 9999px; background: #f59e0b; }
.pb-notas p { font-size: .88rem; color: var(--pb-texto-2); white-space: pre-line; max-height: 10rem; overflow-y: auto; padding-right: .35rem; scrollbar-width: thin; scrollbar-color: var(--pb-borde-fuerte) transparent; }

/* Secciones */
.pb-seccion { scroll-margin-top: 5rem; }
.pb-seccion-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.pb-seccion-titulo { display: flex; align-items: center; gap: .65rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.pb-seccion-icono { width: 2.1rem; height: 2.1rem; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; background: color-mix(in oklab, var(--c, var(--pb-coral)) 14%, #fff); }
.pb-vacio { color: var(--pb-tenue); font-size: .92rem; font-style: italic; }

.pb-rejilla { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .pb-rejilla { grid-template-columns: 1fr 1fr; } }
.pb-item { background: #fff; border: 1px solid var(--pb-borde); border-radius: 12px; box-shadow: var(--pb-sombra); padding: 1.1rem 1.25rem; transition: border-color .15s; }
.pb-item:hover { border-color: var(--pb-borde-fuerte); }
.pb-item-etiqueta { display: flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in oklab, var(--c, var(--pb-coral)) 70%, #1e1f21); margin-bottom: .4rem; }
.pb-item-etiqueta::before { content: ''; width: .45rem; height: .45rem; border-radius: 9999px; background: var(--c, var(--pb-coral)); flex: none; }
.pb-item.pb-inactivo { opacity: .6; }
.pb-item-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .25rem; }
.pb-item-titulo { font-weight: 700; }
.pb-item-sub { font-size: .82rem; color: var(--pb-tenue); margin-bottom: .4rem; }
.pb-item-texto { font-size: .92rem; color: var(--pb-texto-2); white-space: pre-line; }
.pb-item-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }

/* Protocolo de crisis: 3 fases */
.pb-fases { display: grid; border: 1px solid var(--pb-borde); border-radius: var(--pb-radio); overflow: hidden; background: #fff; box-shadow: var(--pb-sombra); }
@media (min-width: 48rem) { .pb-fases { grid-template-columns: repeat(3, 1fr); } }
.pb-fase { padding: 1.2rem 1.35rem 1.35rem; border-bottom: 1px solid var(--pb-borde); }
@media (min-width: 48rem) { .pb-fase { border-bottom: 0; border-right: 1px solid var(--pb-borde); } .pb-fase:last-child { border-right: 0; } }
.pb-fase:last-child { border-bottom: 0; }
.pb-fase-cab { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.pb-fase-num { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; color: #fff; }
.pb-fase-1 .pb-fase-num { background: #f59e0b; }
.pb-fase-2 .pb-fase-num { background: #dc2626; }
.pb-fase-3 .pb-fase-num { background: #0d9488; }
.pb-fase-nombre { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pb-fase-parte + .pb-fase-parte { margin-top: .75rem; }
.pb-fase-etiqueta { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pb-tenue); margin-bottom: .15rem; }
.pb-fase-2 .pb-fase-parte:last-child .pb-fase-etiqueta { color: #dc2626; }
.pb-fase p { font-size: .92rem; color: var(--pb-texto-2); white-space: pre-line; }

/* Chips / badges */
.pb-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 600; line-height: 1.2; padding: .22rem .6rem; border-radius: 9999px; white-space: nowrap; text-decoration: none; background: #f5f5f4; color: #57534e; }
.pb-chip-ambar { background: #fef3c7; color: #92400e; }
.pb-chip-rojo { background: #fee2e2; color: #991b1b; }
.pb-chip-rojo-fuerte { background: #dc2626; color: #fff; }
.pb-chip-verde { background: #d1fae5; color: #065f46; }
.pb-chip-azul { background: #dbeafe; color: #1e40af; }
.pb-chip-morado { background: #f3e8ff; color: #6b21a8; }
.pb-chip-cielo { background: #e0f2fe; color: #075985; }
.pb-chip-teal { background: #ccfbf1; color: #115e59; }
.pb-chip-coral { background: var(--pb-coral-suave); color: var(--pb-coral-oscuro); }
a.pb-chip:hover { filter: brightness(.96); }

/* Listas (documentos, bitácora, citas) */
.pb-lista { background: #fff; border: 1px solid var(--pb-borde); border-radius: var(--pb-radio); box-shadow: var(--pb-sombra); overflow: hidden; }
.pb-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; padding: .8rem 1.15rem; border-top: 1px solid var(--pb-borde); }
.pb-fila:first-child { border-top: 0; }
.pb-fila-titulo { flex: 1 1 12rem; min-width: 0; font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; }
.pb-fila-meta { font-size: .82rem; color: var(--pb-tenue); }
.pb-entrada { padding: .9rem 1.15rem; border-top: 1px solid var(--pb-borde); }
.pb-entrada:first-child { border-top: 0; }
.pb-entrada-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem; margin-bottom: .35rem; }
.pb-entrada p { font-size: .92rem; color: var(--pb-texto-2); white-space: pre-line; }

.pb-bloque { display: grid; gap: 1rem; }
.pb-form-titulo { font-size: .95rem; font-weight: 700; margin-bottom: .85rem; }

/* ---------- Pie ---------- */
.pb-pie { border-top: 1px solid var(--pb-borde); padding: 1.5rem 1rem 2rem; text-align: center; font-size: .82rem; color: var(--pb-tenue); }
.pb-pie p + p { margin-top: .3rem; }

/* ---------- Móvil ---------- */
@media (max-width: 47.99rem) {
    .pb-nav-paciente { display: none; }
    .pb-hero { padding: 1.25rem; }
    .pb-hero h1 { font-size: 1.45rem; }
    .pb-avatar-grande { width: 3rem; height: 3rem; font-size: 1.1rem; }
    .pb-main { padding-top: 1.25rem; gap: 2.25rem; }
}

/* ---------- Enlaces en formularios de acceso ---------- */
.pb-fila-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.pb-enlace { font-size: .88rem; font-weight: 600; color: var(--pb-coral-oscuro); text-decoration: none; }
.pb-enlace:hover { text-decoration: underline; text-underline-offset: 2px; }
.pb-pie-tarjeta { margin-top: 1.4rem; text-align: center; font-size: .88rem; }
.pb-pie-tarjeta a { color: var(--pb-tenue); text-decoration: underline; text-underline-offset: 2px; }
.pb-pie-tarjeta a:hover { color: var(--pb-texto); }

/* Subgrupos dentro de una sección (Equipo: Especialistas / Colegio) */
.pb-subtitulo { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pb-tenue); margin: 1.25rem 0 .6rem; }
.pb-seccion-cab + .pb-subtitulo { margin-top: 0; }