/* Solo para /formulas/: el desglose completo de cada escala y los grupos
   nuevos (cirugía, pediatría, gineco-obstetricia). Se carga después de
   medfocus.v6.css y usa sus mismos tokens.                                   */

.sis.cirugia{background:rgba(120,200,120,.15);color:#8FD18F}
.sis.pediatria{background:rgba(110,190,240,.16);color:#86C8F2}
.sis.gineco{background:rgba(236,130,190,.16);color:#F09ACB}

/* subtema que trae la tarjeta original (Apéndice, Vía biliar, Neonatología…) */
.tema{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;font-weight:600;padding:4px 9px;border-radius:100px;
  background:var(--sunk);color:var(--ink-2)}

/* al abrir el desglose la tarjeta ocupa toda la fila: las tablas necesitan aire */
@media(min-width:700px){.rejilla-f .form:has(.desglose[open]){grid-column:1 / -1}}

.desglose{margin-top:14px;border-top:1px solid var(--rule)}
.desglose summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:10px;padding:12px 2px 2px;font-size:14px;font-weight:600;
  color:var(--brand-deep)}
.desglose summary::-webkit-details-marker{display:none}
.desglose summary svg{flex:none;transition:transform .18s ease}
.desglose[open] summary svg{transform:rotate(180deg)}
.desglose summary:hover span{text-decoration:underline;text-underline-offset:3px}
.desglose summary:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.desglose summary svg{transition:none}}

.dg-cuerpo{padding:6px 0 2px}
.dg-tit{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:var(--ink-3);margin:18px 0 8px}

/* tablas: se deslizan dentro de su caja en el celular, nunca ensanchan la página */
.dg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--rule);
  border-radius:10px;background:var(--sunk)}
.dg-tabla{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.45}
.dg-tabla th,.dg-tabla td{padding:8px 11px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule)}
.dg-tabla tbody tr:last-child th,.dg-tabla tbody tr:last-child td{border-bottom:0}
.dg-tabla thead th{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;color:var(--ink-3);background:var(--card);
  white-space:nowrap}
.dg-tabla tbody th{font-weight:600;color:var(--ink);min-width:9em}
.dg-tabla td{color:var(--ink-2)}
.dg-tabla td:last-child{min-width:4.5em}
.dg-tabla tr.sub td{background:var(--card);color:var(--brand-deep);font-weight:600;
  font-size:12.5px;padding-top:10px}
.dg-tabla b{color:var(--ink)}
.dg-pie{font-size:12.5px;color:var(--ink-3);margin:7px 2px 0;line-height:1.5}

.dg-notas{margin:0;padding-left:19px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.dg-notas li{margin:0 0 7px}
.dg-notas li::marker{color:var(--brand)}
.dg-notas b{color:var(--ink)}

.dg-fuentes{margin:18px 0 0;padding-top:12px;border-top:1px dashed var(--rule-2);
  font-size:12.5px;line-height:1.6;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:4px 12px}
.dg-fuentes .lbl{width:100%;color:var(--ink-3)}
.dg-fuentes a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--rule-2);
  text-underline-offset:3px}
.dg-fuentes a:hover{color:var(--brand-deep);text-decoration-color:currentColor}

@media(max-width:520px){
  .dg-tabla{font-size:13px}
  .dg-tabla th,.dg-tabla td{padding:7px 9px}
  .dg-tabla tbody th{min-width:7.5em}
  .dg-notas{font-size:13.5px}
}

/* ---------- Regalo: mazo de Anki por WhatsApp (ANKI FÓRMULAS) ---------- */
.regalo{display:flex;align-items:center;gap:16px;text-decoration:none;color:inherit;
  background:linear-gradient(135deg,var(--brand-wash),var(--card));border:1.5px solid var(--brand);
  border-radius:var(--r);padding:18px 20px;margin:0 0 22px;box-shadow:var(--shadow);
  transition:transform .14s ease,box-shadow .14s ease}
.regalo:hover{transform:translateY(-2px)}
.regalo .rg-ic,.barra-regalo .rg-ic,.dg-rg-ic{flex:none;display:flex;align-items:center;justify-content:center;
  color:var(--brand)}
.regalo .rg-ic{width:46px;height:46px;border-radius:12px;background:var(--card);border:1px solid var(--rule-2)}
.regalo .rg-txt{flex:1;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.regalo .rg-txt .lbl{display:block;color:var(--brand-deep);margin-bottom:2px}
.regalo .rg-txt b{display:block;font-size:17px;color:var(--ink);letter-spacing:-.01em;margin-bottom:3px}
.regalo .rg-txt strong{color:var(--ink);white-space:nowrap}
.regalo .rg-boton{flex:none;font-weight:700;font-size:14.5px;color:#2A1300;background:var(--brand);
  border-radius:100px;padding:11px 18px;white-space:nowrap}
@media(max-width:620px){
  .regalo{flex-wrap:wrap;padding:16px}
  .regalo .rg-txt{flex-basis:calc(100% - 62px)}
  .regalo .rg-boton{flex-basis:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){.regalo{transition:none}.regalo:hover{transform:none}}

/* al final de cada desglose */
.dg-regalo{display:flex;align-items:flex-start;gap:10px;margin:16px 0 2px;padding:12px 14px;
  border-radius:10px;background:var(--brand-wash);border:1px solid var(--brand);text-decoration:none;
  color:var(--ink-2);font-size:13.5px;line-height:1.5}
.dg-regalo b,.dg-regalo strong{color:var(--ink)}
.dg-regalo:hover{border-color:var(--brand-deep)}
.dg-regalo .dg-rg-ic{margin-top:1px}

/* barra fija en el celular (aparece tras abrir el 2.º desglose) */
.barra-regalo{display:none}
@media(max-width:700px){
  .barra-regalo:not([hidden]){display:flex;align-items:center;gap:8px;position:fixed;left:10px;right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;background:var(--card);
    border:1.5px solid var(--brand);border-radius:14px;padding:6px 6px 6px 12px;
    box-shadow:0 10px 30px rgba(0,0,0,.45)}
  .barra-regalo a{flex:1;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-2);
    font-size:13.5px;line-height:1.35;min-width:0}
  .barra-regalo a b{color:var(--ink)}
  .barra-regalo .br-fl{color:var(--brand);font-weight:700;margin-left:auto;padding-right:4px}
  .barra-regalo button{flex:none;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
    background:var(--sunk);color:var(--ink-3);font-size:14px}
  body:has(.barra-regalo:not([hidden])) .pie{padding-bottom:80px}
}