/* ========================================================= PGI · CIRUGÍA — sección hermana Paleta «A · Quirófano»: mismo papel que Interna, acento verde quirúrgico. Se activa con . IMPORTANTE: este bloque va DESPUÉS de html[data-theme="dark"] para poder pisarlo por orden de cascada. ========================================================= */ html[data-app="cirugia"]{ --accent:#2F7D6B; --accent-soft:#DDEBE6; --accent-ink:#215C4F; --mnemo:#4E8C7E; --mnemo-soft:#E1EDE9; --tecnica:#2F7D6B; --tecnica-soft:#DDEBE6; --verify:#8A6E2B; --verify-soft:#F2EBD8; } html[data-app="cirugia"][data-theme="dark"]{ --accent:#59B39C; --accent-soft:#20342D; --accent-ink:#84D2BB; --mnemo:#7FC4B0; --mnemo-soft:#1F302B; --tecnica:#59B39C; --tecnica-soft:#20342D; --verify:#D2A551; --verify-soft:#332715; } /* marca de la sección */ html[data-app="cirugia"] .brand .word{color:var(--accent-ink);} html[data-app="cirugia"] .home-hero h1{color:var(--accent-ink);} /* ---------- fichas todavía no escritas ---------- */ .nav a.soon,.spec-card.soon{opacity:.42;cursor:default;pointer-events:none;} .nav a.soon::after{content:"·";margin-left:auto;color:var(--faint);} .spec-card.soon{border-style:dashed;} .spec-card.soon::after{content:"en preparación";display:block;margin-top:8px; font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);} /* ---------- BLOQUE: técnica quirúrgica (paso a paso) ---------- */ .tecnica{background:var(--surface);border:1px solid var(--line); border-left:3px solid var(--tecnica);border-radius:var(--r-md); padding:15px 19px;margin:18px 0;box-shadow:var(--shadow-2);} .tecnica > h4{font-family:var(--sans);font-size:12px;text-transform:uppercase; letter-spacing:.08em;color:var(--accent-ink);font-weight:600; margin-bottom:10px;display:flex;align-items:center;gap:8px;} .tecnica > h4::before{content:"◆";font-size:10px;} .tecnica > h4 .tsub{margin-left:auto;text-transform:none;letter-spacing:0; font-size:11.5px;font-weight:400;color:var(--faint);} .tecnica ol{list-style:none;counter-reset:paso;padding:0;margin:0;} .tecnica ol > li{counter-increment:paso;position:relative; padding:7px 0 7px 36px;font-size:14px;line-height:1.55; border-top:1px solid var(--line);} .tecnica ol > li:first-child{border-top:none;} .tecnica ol > li::before{content:counter(paso,decimal-leading-zero); position:absolute;left:0;top:7px;font-family:var(--mono);font-size:11.5px; font-weight:500;color:var(--tecnica);background:var(--tecnica-soft); border-radius:var(--r-xs);padding:1px 5px;} .tecnica .paso-t{font-weight:600;color:var(--ink);} /* ---------- BLOQUE: indicaciones / contraindicaciones ---------- */ .indic{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px;margin:18px 0;} .indic > div{border-radius:var(--r-md);padding:13px 16px;border:1px solid var(--line); border-top:3px solid;background:var(--surface);} .indic .si{border-top-color:var(--accent);} .indic .no{border-top-color:var(--crit);} /* sin text-transform: hay siglas donde la caja es el significado (CMA vs CmA) */ .indic h4{font-family:var(--sans);font-size:var(--fs-tag); letter-spacing:.03em;font-weight:600;margin-bottom:8px;} .indic .si h4{color:var(--accent-ink);} .indic .no h4{color:var(--crit-ink);} .indic ul{padding-left:17px;margin:0;} .indic li{font-size:13.5px;line-height:1.5;margin-bottom:4px;} /* ---------- BLOQUE: complicaciones con timing ---------- */ .complic{margin:18px 0;border:1px solid var(--line);border-radius:var(--r-md); overflow:hidden;box-shadow:var(--shadow-2);} .complic > h4{font-family:var(--sans);font-size:12px;text-transform:uppercase; letter-spacing:.08em;color:var(--crit-ink);font-weight:600; padding:11px 16px;background:var(--crit-soft); display:flex;align-items:center;gap:8px;} .complic > h4::before{content:"▲";font-size:10px;} .complic .cx{display:flex;gap:14px;padding:10px 16px; border-top:1px solid var(--line);background:var(--surface);font-size:13.5px;} .complic .cx:first-of-type{border-top:none;} .complic .when{flex:none;width:96px;font-family:var(--mono);font-size:11.5px; color:var(--crit);font-weight:500;padding-top:2px;} .complic .what b{color:var(--ink);} /* ---------- WIDGET: niveles ganglionares del cuello ---------- */ /* Dos capas: .cu-piel encima (lo que se palpa) y los niveles debajo. Al togglear se le pone .off a la capa de piel y se revela lo profundo. */ /* La lámina se lleva la mayor parte del ancho: buena parte de su viewBox se va en la columna de rótulos de la izquierda y en la leyenda de abajo, así que con 1.5fr el dibujo en sí quedaba en unos 340px y los seis polígonos no se distinguían. El panel de texto tolera ser más angosto; el dibujo no. */ .cuello{display:grid;grid-template-columns:minmax(420px,2.7fr) minmax(230px,1fr); gap:18px;align-items:start;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:18px;margin:20px 0;box-shadow:var(--shadow-2);} .cu-fig{position:relative;} .cu-fig svg{width:100%;height:auto;display:block;} #cuPiel{transition:opacity .45s ease;} /* La lámina de Gray trae sus propias líneas rojas y amarillas (carótida y nervios). Se desaturan para que el único color de la figura sea el de los trazos propios: si no, hay dos rojos distintos queriendo decir cosas distintas. En oscuro además se invierte —es un dibujo negro sobre blanco— y se entibia con sepia para que no quede un bloque frío contra la paleta. */ .cu-fig image{filter:grayscale(1) contrast(.95);} /* En oscuro la lámina se invierte a propósito —los niveles se pintan con los tokens del tema, que ahí son claros y necesitan fondo oscuro debajo—. Pero con brightness .85 el grabado quedaba casi negro y no se leía ningún reparo anatómico: subido, las líneas vuelven a distinguirse sin robarle contraste a los polígonos que van encima. */ html[data-theme="dark"] .cu-fig image{filter:invert(1) grayscale(1) sepia(.35) brightness(1.12) contrast(1.18);} #cuPiel.off{opacity:0;pointer-events:none;} .cu-capa{margin-top:10px;width:100%;padding:9px 12px;border-radius:var(--r-pill); border:1px solid var(--accent);background:var(--accent-soft);color:var(--accent-ink); font:600 12.5px/1 var(--sans);cursor:pointer;} .cu-capa:hover{background:var(--surface-2);} .cu-attr{margin:8px 0 0;font-size:10.5px;line-height:1.45;color:var(--faint);} .cu-attr a{color:var(--muted);} /* niveles: apagados por defecto, se encienden al elegir patología */ .cu-nivel path{fill:var(--surface-2);fill-opacity:.5;stroke:var(--line-strong);stroke-width:1.6; transition:fill .3s ease,stroke .3s ease;cursor:pointer;} .cu-nivel text{fill:var(--ink);font:700 21px var(--sans);pointer-events:none; stroke:var(--surface);stroke-width:4;paint-order:stroke fill; transition:fill .3s ease;} .cu-nivel.on path{fill:var(--crit-soft);fill-opacity:.62;stroke:var(--crit);stroke-width:2.6;} .cu-nivel.on text{fill:var(--crit-ink);} .cu-nivel.opt path{fill:var(--tangelo-soft);fill-opacity:.62;stroke:var(--tangelo);stroke-width:2.4; stroke-dasharray:6 4;} .cu-nivel.opt text{fill:var(--tangelo-ink);} .cu-lbl{display:block;font:600 11px/1 var(--sans);text-transform:uppercase; letter-spacing:.08em;color:var(--faint);margin-bottom:8px;} .cu-btns{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;} .cu-btns button{padding:6px 11px;border-radius:var(--r-pill);border:1px solid var(--line-strong); background:var(--surface);color:var(--muted);font:500 12px/1 var(--sans);cursor:pointer;} .cu-btns button:hover{border-color:var(--accent);color:var(--accent-ink);} .cu-btns button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent); color:var(--bg);font-weight:600;} .cu-info{border-left:3px solid var(--accent);padding:2px 0 2px 13px;min-height:120px;} .cu-info h4{font:700 13.5px/1.3 var(--sans);color:var(--ink);margin:0 0 4px;} .cu-info .cu-niv{font:700 12px/1 var(--mono);color:var(--crit-ink);margin-bottom:8px;display:block;} .cu-info p{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 7px;} .cu-info p b{color:var(--ink);} .cu-info .cu-hint{font-size:12px;color:var(--faint);font-style:italic;} @media(max-width:780px){ .cuello{grid-template-columns:1fr;} } /* ---------- BLOQUE: algoritmo de manejo ---------- */ /* Cierre de ficha, hermano de .datos-clave y .tribunal: el diagrama de flujo paso a paso del tema. Va SIEMPRE antes de .datos-clave. */ .algoritmo{background:var(--surface);border:1px solid var(--line); border-radius:var(--r-lg);padding:20px 22px 8px;margin:26px 0; box-shadow:var(--shadow-2);} .algoritmo h3{font-family:var(--serif);font-size:1.14rem;font-weight:600; color:var(--ink);margin:0 0 4px;} .algoritmo .fig-wrap{margin-top:10px;} .algoritmo figcaption{padding-bottom:12px;} /* ---------- flag: dato a verificar contra libro ---------- */ .verify{display:inline-flex;align-items:baseline;gap:5px; background:var(--verify-soft);color:var(--verify); border-radius:var(--r-xs);padding:1px 6px;font-size:11.5px;font-weight:600; font-family:var(--sans);white-space:nowrap;vertical-align:baseline;} .verify::before{content:"⚑";font-size:10px;} p.verify-note{font-size:var(--fs-tag);color:var(--verify);background:var(--verify-soft); border-left:3px solid var(--verify);border-radius:0 8px 8px 0; padding:9px 13px;margin:14px 0;} /* ---------- glosario de nomenclatura ---------- */ .glosa{margin:16px 0 20px;border:1px solid var(--line);border-radius:var(--r-md); overflow:hidden;box-shadow:var(--shadow-2);} .glosa .gl{display:grid;grid-template-columns:150px minmax(0,1fr); border-top:1px solid var(--line);background:var(--surface);} .glosa .gl:first-child{border-top:none;} .glosa .gl:nth-child(even){background:var(--zebra);} .glosa .gt{font-family:var(--mono);font-size:13px;font-weight:500; color:var(--accent-ink);padding:9px 14px;border-right:1px solid var(--line);} .glosa .gd{padding:9px 14px;font-size:13.5px;line-height:1.5;} .glosa .gd em{color:var(--muted);font-style:italic;} @media(max-width:620px){ .glosa .gl{grid-template-columns:1fr;} .glosa .gt{border-right:none;border-bottom:1px solid var(--line);} } /* ---------- ALGORITMO DE MANEJO (cascada de decisiones) ---------- Se lee de arriba hacia abajo: cada paso es una pregunta con dos salidas. La salida «operar» corta la cascada; «seguir» baja al paso siguiente. En móvil las salidas se apilan. */ .algo{border:1px solid var(--line);border-radius:var(--r-lg); background:var(--surface);box-shadow:var(--shadow-2); padding:18px 20px 20px;margin:20px 0;} .algo > h4{font-family:var(--sans);font-size:var(--fs-meta,12px); text-transform:uppercase;letter-spacing:.08em;color:var(--accent-ink); font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px;} .algo > h4::before{content:"⌥";font-size:12px;} .algo > .algo-sub{font-size:var(--fs-meta,12.5px);color:var(--muted); font-style:italic;margin:0 0 14px;} .algo-steps{list-style:none;padding:0;margin:0;counter-reset:paso;} .algo-gate{counter-increment:paso;position:relative; padding:0 0 0 34px;margin-bottom:14px;} .algo-gate::before{content:counter(paso);position:absolute;left:0;top:1px; width:24px;height:24px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:12px;font-weight:500; background:var(--accent);color:#fff;} /* línea que une un paso con el siguiente */ .algo-gate::after{content:"";position:absolute;left:11px;top:29px;bottom:-14px; width:2px;background:var(--line-strong);} .algo-gate:last-of-type::after{display:none;} .algo-q{font-weight:600;color:var(--ink);font-size:var(--fs-body,14.5px); margin-bottom:8px;line-height:1.45;} .algo-outs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;} .algo-out{border-radius:var(--r-md);padding:9px 13px; font-size:var(--fs-card,13.5px);line-height:1.45;border:1px solid var(--line); border-left-width:3px;background:var(--bg);} /* El rótulo de la salida es SOLO el primer — de ahí el `> b:first-child`. Sin esa restricción la regla agarraba cualquier del cuerpo y lo convertía en un bloque en versalitas, así que una frase como «Es prehepática o un defecto de conjugación» se partía en tres pedazos y quedaba ilegible. Pasaba en 56 de las 76 salidas del sitio y no se veía en ningún chequeo automático: hubo que mirar una captura. Ahora el interno vuelve a ser negrita común, que es lo que cualquiera espera al escribirlo. */ .algo-out > b:first-child{display:block;font-size:var(--fs-micro,11px); text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px;} .algo-out.op{border-left-color:var(--crit);background:var(--crit-soft);} .algo-out.op > b:first-child{color:var(--crit-ink);} .algo-out.seg{border-left-color:var(--accent);background:var(--accent-soft);} .algo-out.seg > b:first-child{color:var(--accent-ink);} .algo-out.next{border-left-color:var(--line-strong);} .algo-out.next > b:first-child{color:var(--muted);} .algo-end{margin-top:16px;border-top:1px solid var(--line);padding-top:14px; font-size:var(--fs-card,13.5px);line-height:1.5;} .algo-end b{color:var(--accent-ink);}