/* PG Forja Clínica · Temas visuales (todos con fondo blanco).
 * Se activan con <html data-estilo="…">; la paleta opcional con data-paleta="…". */

/* ================= Paletas ================= */
:root[data-paleta="turquesa"] { --pg-primario: #0f766e; --pg-secundario: #134e4a; --pg-acento: #99f6e4; }
:root[data-paleta="azul"]     { --pg-primario: #1d4ed8; --pg-secundario: #1e3a8a; --pg-acento: #bfdbfe; }
:root[data-paleta="salvia"]   { --pg-primario: #4d7c5b; --pg-secundario: #2f4a37; --pg-acento: #cfe3d4; }
:root[data-paleta="coral"]    { --pg-primario: #d4574b; --pg-secundario: #6b2a24; --pg-acento: #ffd3cc; }
:root[data-paleta="lavanda"]  { --pg-primario: #6d5bd0; --pg-secundario: #3b2f7a; --pg-acento: #ddd6fe; }
:root[data-paleta="grafito"]  { --pg-primario: #334155; --pg-secundario: #0f172a; --pg-acento: #cbd5e1; }
:root[data-paleta="arena"]    { --pg-primario: #b45309; --pg-secundario: #5b2d0a; --pg-acento: #fde6c4; }

/* ================= Base común: blanco y modo claro siempre ================= */
:root[data-estilo] {
  --fondo: #ffffff; --superficie: #ffffff; --superficie2: #f6f8fa; --texto: #1c2430; --suave: #5b6675; --borde: #e3e7ec;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 8px rgba(16, 24, 40, .04);
  --prim-suave: color-mix(in srgb, var(--pg-primario) 10%, #fff);
  color-scheme: light;
}
[data-estilo] body { background: var(--fondo); }
/* Menú lateral claro */
[data-estilo] .pg-lateral { background: #fff; color: var(--texto); border-right: 1px solid var(--borde); }
[data-estilo] .pg-marca { border-bottom-color: var(--borde); }
[data-estilo] .pg-marca img { background: none; padding: 0; }
[data-estilo] .pg-nav a { color: var(--suave); }
[data-estilo] .pg-nav a:hover { background: var(--superficie2); color: var(--texto); }
[data-estilo] .pg-nav a.activo { background: var(--prim-suave); color: var(--pg-primario); font-weight: 600; }
[data-estilo] .pg-nav-grupo { color: var(--pg-primario); }
[data-estilo] .pg-nav-sep { background: var(--borde); }
[data-estilo] .pg-usuario { border-top-color: var(--borde); }
[data-estilo] .pg-avatar { background: var(--prim-suave); color: var(--pg-primario); }
[data-estilo] .pg-barra { background: rgba(255, 255, 255, .92); }
/* Cabecera del área de paciente clara */
[data-estilo] .pg-p-cab { background: #fff; color: var(--texto); border-bottom: 1px solid var(--borde); }
[data-estilo] .pg-p-tabs a { color: var(--suave); }
[data-estilo] .pg-p-tabs a.activo { background: var(--prim-suave); color: var(--pg-primario); }
[data-estilo] .pg-login { background: #fff; }
/* Con tema, el selector claro/oscuro del perfil no aplica. */
[data-estilo] .pg-tarjeta:has(> .pg-seg [data-tema]) { display: none; }

/* ================= Clínico ================= */
[data-estilo="clinico"] .pg-tarjeta, [data-estilo="clinico"] .pg-w { box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
[data-estilo="clinico"] .pg-nav a.activo { box-shadow: inset 3px 0 0 var(--pg-primario); border-radius: 0 9px 9px 0; }
[data-estilo="clinico"] .pg-tabla th { background: #fff; }

/* ================= Nórdico ================= */
:root[data-estilo="nordico"] { --radio: 6px; --borde: #dde2e7; --superficie2: #f7f8f9; --sombra: none; --suave: #626d7a; }
[data-estilo="nordico"] body { letter-spacing: .005em; }
[data-estilo="nordico"] .pg-tarjeta, [data-estilo="nordico"] .pg-w { box-shadow: none; border-radius: 6px; }
[data-estilo="nordico"] .pg-btn { border-radius: 6px; font-weight: 500; }
[data-estilo="nordico"] .pg-btn.sec { background: #fff; }
[data-estilo="nordico"] .pg-nav a { border-radius: 4px; }
[data-estilo="nordico"] .pg-nav a.activo { background: var(--superficie2); color: var(--texto); box-shadow: inset 2px 0 0 var(--texto); }
[data-estilo="nordico"] .pg-cab-vista h1 { font-weight: 500; letter-spacing: -.01em; }
[data-estilo="nordico"] .pg-tarjeta h3, [data-estilo="nordico"] .pg-w h3 { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave); }
[data-estilo="nordico"] .pg-modal-caja { border-radius: 8px; }
[data-estilo="nordico"] input, [data-estilo="nordico"] select, [data-estilo="nordico"] textarea { border-radius: 4px !important; }

/* ================= Sereno ================= */
:root[data-estilo="sereno"] { --radio: 20px; --borde: #eceff3; --superficie2: #f5f7f9; --sombra: 0 6px 24px rgba(16, 24, 40, .07); }
[data-estilo="sereno"] .pg-tarjeta, [data-estilo="sereno"] .pg-w { border-color: transparent; border-radius: 20px; box-shadow: var(--sombra); }
[data-estilo="sereno"] .pg-tarjeta { padding: 20px 22px; }
[data-estilo="sereno"] .pg-btn { border-radius: 14px; padding: 10px 18px; }
[data-estilo="sereno"] .pg-btn.peq { border-radius: 10px; }
[data-estilo="sereno"] .pg-nav a { border-radius: 14px; padding: 10px 14px; }
[data-estilo="sereno"] .pg-nav a.activo { background: var(--pg-primario); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--pg-primario) 30%, transparent); }
[data-estilo="sereno"] .pg-modal-caja { border-radius: 24px; }
[data-estilo="sereno"] .pg-busca input { border-radius: 20px; background-color: var(--superficie2); border-color: transparent; }
[data-estilo="sereno"] .pg-chip { border-radius: 20px; }
[data-estilo="sereno"] .pg-inferior a.activo { border-radius: 16px; }
[data-estilo="sereno"] .pg-lateral { border-right: 0; box-shadow: 1px 0 0 var(--borde); }

/* ================= Fresco ================= */
:root[data-estilo="fresco"] { --radio: 12px; }
[data-estilo="fresco"] .pg-barra, [data-estilo="fresco"] .pg-p-cab { box-shadow: inset 0 4px 0 var(--pg-primario); padding-top: 14px; }
[data-estilo="fresco"] .pg-tarjeta, [data-estilo="fresco"] .pg-w { border-top: 3px solid var(--pg-primario); }
[data-estilo="fresco"] .pg-tarjeta.aviso { border-top-color: var(--aviso); }
[data-estilo="fresco"] .pg-lateral .pg-marca { background: var(--pg-primario); color: #fff; border-bottom: 0; }
[data-estilo="fresco"] .pg-lateral .pg-marca img { background: #fff; padding: 3px; border-radius: 8px; }
[data-estilo="fresco"] .pg-nav a.activo { background: var(--pg-primario); color: #fff; }
[data-estilo="fresco"] .pg-cab-vista h1 .ico { background: var(--prim-suave); border-radius: 10px; padding: 4px 6px; }
[data-estilo="fresco"] .pg-pestanas a.on { background: var(--prim-suave); border-radius: 8px 8px 0 0; }

/* ================= Editorial ================= */
:root[data-estilo="editorial"] { --radio: 2px; --borde: #d8dce0; --sombra: none; --texto: #16191d; }
[data-estilo="editorial"] h1, [data-estilo="editorial"] h2, [data-estilo="editorial"] h3, [data-estilo="editorial"] .pg-marca b, [data-estilo="editorial"] .pg-login h1 { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; font-weight: 700; letter-spacing: -.01em; }
[data-estilo="editorial"] .pg-cab-vista h1 { font-size: 28px; }
[data-estilo="editorial"] .pg-cab-vista { border-bottom: 2px solid var(--texto); padding-bottom: 10px; }
[data-estilo="editorial"] .pg-tarjeta, [data-estilo="editorial"] .pg-w { border: 0; border-top: 1px solid var(--texto); border-radius: 0; box-shadow: none; padding-left: 2px; padding-right: 2px; }
[data-estilo="editorial"] .pg-tarjeta h3 { font-size: 18px; }
[data-estilo="editorial"] .pg-btn { border-radius: 2px; text-transform: uppercase; letter-spacing: .05em; font-size: 13px; }
[data-estilo="editorial"] .pg-btn.sec { background: #fff; box-shadow: inset 0 0 0 1px var(--texto); }
[data-estilo="editorial"] .pg-nav a { border-radius: 0; }
[data-estilo="editorial"] .pg-nav a.activo { background: none; color: var(--texto); text-decoration: underline; text-decoration-color: var(--pg-primario); text-decoration-thickness: 2px; text-underline-offset: 5px; }
[data-estilo="editorial"] .pg-modal-caja { border-radius: 4px; }
[data-estilo="editorial"] a { text-underline-offset: 3px; }

/* ================= Compacto ================= */
:root[data-estilo="compacto"] { --radio: 8px; --lat: 212px; }
[data-estilo="compacto"] body { font-size: 14px; line-height: 1.4; }
[data-estilo="compacto"] .pg-vista { padding: 14px 16px 80px; }
[data-estilo="compacto"] .pg-tarjeta { padding: 10px 12px; margin-bottom: 10px; }
[data-estilo="compacto"] .pg-tarjeta h3 { font-size: 14px; margin-bottom: 6px; }
[data-estilo="compacto"] .pg-cab-vista { margin-bottom: 10px; }
[data-estilo="compacto"] .pg-cab-vista h1 { font-size: 19px; }
[data-estilo="compacto"] .pg-nav a { padding: 6px 10px; }
[data-estilo="compacto"] .pg-btn { padding: 7px 12px; }
[data-estilo="compacto"] .pg-btn.peq { padding: 3px 8px; font-size: 12px; }
[data-estilo="compacto"] .pg-tabla td, [data-estilo="compacto"] .pg-tabla th { padding: 6px 8px; }
[data-estilo="compacto"] .pg-lista li { padding-top: 6px; padding-bottom: 6px; }
[data-estilo="compacto"] .pg-barra { padding: 6px 16px; }
[data-estilo="compacto"] .pg-marca { padding: 12px 14px; }

/* ================= Alto contraste ================= */
:root[data-estilo="contraste"] { --texto: #000; --suave: #2b2b2b; --borde: #1a1a1a; --superficie2: #f2f2f2; --sombra: none; --radio: 6px; }
[data-estilo="contraste"] body { font-size: 16.5px; }
[data-estilo="contraste"] .pg-tarjeta, [data-estilo="contraste"] .pg-w { border: 2px solid #000; box-shadow: none; }
[data-estilo="contraste"] .pg-lateral { border-right: 2px solid #000; }
[data-estilo="contraste"] .pg-nav a { color: #000; }
[data-estilo="contraste"] .pg-nav a.activo { background: #000; color: #fff; }
[data-estilo="contraste"] .pg-btn { background: #000; box-shadow: none; }
[data-estilo="contraste"] .pg-btn.sec { background: #fff; color: #000; box-shadow: inset 0 0 0 2px #000; }
[data-estilo="contraste"] .pg-btn.peligro { background: #b00020; }
[data-estilo="contraste"] a:not(.pg-btn) { color: #0b3fae; }
[data-estilo="contraste"] :is(p, li, small, td, .pg-nota) > a:not(.pg-btn) { text-decoration: underline; }
[data-estilo="contraste"] .pg-nav a, [data-estilo="contraste"] .pg-inferior a, [data-estilo="contraste"] a.pg-marca, [data-estilo="contraste"] a.pg-usuario, [data-estilo="contraste"] .pg-p-tabs a, [data-estilo="contraste"] .pg-pestanas a { color: #000; text-decoration: none; }
[data-estilo="contraste"] .pg-nav a.activo, [data-estilo="contraste"] .pg-p-tabs a.activo { color: #fff; background: #000; }
[data-estilo="contraste"] .pg-nota, [data-estilo="contraste"] small { color: #1f1f1f; }
[data-estilo="contraste"] :focus-visible { outline: 3px solid #0b3fae !important; outline-offset: 2px; }
[data-estilo="contraste"] input, [data-estilo="contraste"] select, [data-estilo="contraste"] textarea { border: 2px solid #000 !important; }
[data-estilo="contraste"] .pg-pestanas a.on { color: #000; border-bottom-color: #000; }
[data-estilo="contraste"] .pg-p-cab, [data-estilo="contraste"] .pg-barra { border-bottom: 2px solid #000; }

/* ================= Pastel ================= */
:root[data-estilo="pastel"] { --radio: 16px; --superficie2: color-mix(in srgb, var(--pg-primario) 6%, #fff); --borde: color-mix(in srgb, var(--pg-primario) 16%, #fff); }
[data-estilo="pastel"] .pg-tarjeta, [data-estilo="pastel"] .pg-w { background: color-mix(in srgb, var(--pg-primario) 4%, #fff); border-color: color-mix(in srgb, var(--pg-primario) 14%, #fff); box-shadow: none; border-radius: 16px; }
[data-estilo="pastel"] .pg-btn { border-radius: 999px; padding-left: 18px; padding-right: 18px; }
[data-estilo="pastel"] .pg-btn.sec { background: #fff; }
[data-estilo="pastel"] .pg-nav a { border-radius: 999px; }
[data-estilo="pastel"] .pg-nav a.activo { background: color-mix(in srgb, var(--pg-primario) 16%, #fff); }
[data-estilo="pastel"] .pg-chip { border-radius: 999px; }
[data-estilo="pastel"] .pg-busca input { border-radius: 999px; }
[data-estilo="pastel"] .pg-modal-caja { border-radius: 22px; }
[data-estilo="pastel"] .pg-avatar { background: color-mix(in srgb, var(--pg-acento) 60%, #fff); color: var(--pg-secundario); }

/* ================= Selector de tema (módulo del escritorio) ================= */
.pgt-temas { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.pgt-temas button { border: 2px solid var(--borde); background: #fff; border-radius: 10px; padding: 6px; cursor: pointer; font-size: 12px; color: var(--texto); display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.pgt-temas button.on { border-color: var(--pg-primario); box-shadow: 0 0 0 2px var(--prim-suave); }
.pgt-temas i { height: 34px; border-radius: 6px; border: 1px solid #e5e7eb; background: linear-gradient(90deg, #fff 30%, #f3f4f6 30% 32%, #fff 32%); position: relative; }
.pgt-temas i::after { content: ""; position: absolute; left: 40%; top: 8px; width: 45%; height: 7px; border-radius: 3px; background: var(--pg-primario); }