/* Documentación de Gestión de Moldes · SIPE Informática */
:root {
  --azul: #1F4E79;
  --azul-app: #2196F3;
  --azul-claro: #DCE6F1;
  --fondo: #FFFFFF;
  --fondo-2: #F5F7FA;
  --texto: #1E2A36;
  --texto-2: #55626F;
  --borde: #DDE3EA;
  --nota: #EEF3F9;
  --aviso: #FFF6E5;
  --aviso-borde: #F0B44C;
  --previsto: #B9C8DA;
  --bueno: #2EA44F;
  --malo: #D64545;
  --et-nov-bg: #DFF3E4; --et-nov: #176B33; --et-cor-bg: #FFEFD0; --et-cor: #8A5A00;
  --sombra: 0 1px 3px rgba(16, 38, 64, .08), 0 4px 16px rgba(16, 38, 64, .06);
  --ancho-menu: 280px;
  --alto-cabecera: 60px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --azul: #8AB8E6; --azul-app: #5AB0F5; --azul-claro: #1E3550;
    --fondo: #12181F; --fondo-2: #19212B; --texto: #E3E9EF; --texto-2: #A3B1BF;
    --borde: #2A3542; --nota: #1A2B3D; --aviso: #3A2E17; --aviso-borde: #C89235;
    --sombra: 0 1px 3px rgba(0,0,0,.4);
    --previsto: #3F5269; --bueno: #4CC36E; --malo: #F07272;
    --et-nov-bg: #1D3A27; --et-nov: #7FDB9B; --et-cor-bg: #40311A; --et-cor: #F0B44C;
  }
}
:root[data-theme="dark"] {
  --azul: #8AB8E6; --azul-app: #5AB0F5; --azul-claro: #1E3550;
  --fondo: #12181F; --fondo-2: #19212B; --texto: #E3E9EF; --texto-2: #A3B1BF;
  --borde: #2A3542; --nota: #1A2B3D; --aviso: #3A2E17; --aviso-borde: #C89235;
  --sombra: 0 1px 3px rgba(0,0,0,.4);
  --previsto: #3F5269; --bueno: #4CC36E; --malo: #F07272;
  --et-nov-bg: #1D3A27; --et-nov: #7FDB9B; --et-cor-bg: #40311A; --et-cor: #F0B44C;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--alto-cabecera) + 16px); }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 16px/1.6 "Segoe UI", Roboto, Arial, sans-serif;
}
a { color: var(--azul-app); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Cabecera */
.cabecera {
  position: fixed; inset: 0 0 auto 0; height: var(--alto-cabecera); z-index: 20;
  display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: var(--fondo); border-bottom: 1px solid var(--borde);
}
.cabecera .marca { display: flex; align-items: center; gap: 10px; color: var(--texto); font-weight: 600; white-space: nowrap; }
.cabecera .marca:hover { text-decoration: none; }
.cabecera .marca img { height: 32px; background: #fff; border-radius: 4px; padding: 2px 4px; }
.cabecera .marca span small { display: block; font-weight: 400; color: var(--texto-2); font-size: 12px; line-height: 1.1; }
.buscador { flex: 1; max-width: 520px; margin-left: auto; position: relative; }
.buscador input {
  width: 100%; height: 38px; padding: 0 12px 0 36px; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--fondo-2); color: var(--texto); font: inherit; font-size: 15px;
}
.buscador input:focus { outline: 2px solid var(--azul-app); outline-offset: -1px; }
.buscador svg { position: absolute; left: 11px; top: 11px; width: 16px; height: 16px; color: var(--texto-2); }
.resultados {
  position: absolute; top: 44px; left: 0; right: 0; max-height: 70vh; overflow: auto;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; box-shadow: var(--sombra); display: none;
}
.resultados.abierto { display: block; }
.resultados a { display: block; padding: 10px 14px; border-bottom: 1px solid var(--borde); color: var(--texto); }
.resultados a:hover, .resultados a.activo { background: var(--nota); text-decoration: none; }
.resultados a b { display: block; color: var(--azul); }
.resultados a span { font-size: 13px; color: var(--texto-2); }
.resultados mark { background: #FFE58F; color: inherit; padding: 0 1px; }
.resultados .vacio { padding: 14px; color: var(--texto-2); }
.boton-icono {
  background: none; border: 1px solid var(--borde); color: var(--texto); border-radius: 8px;
  width: 38px; height: 38px; display: inline-grid; place-items: center; cursor: pointer; flex: none;
}
.boton-menu { display: none; }

/* Menú lateral */
.menu {
  position: fixed; top: var(--alto-cabecera); bottom: 0; left: 0; width: var(--ancho-menu);
  overflow-y: auto; padding: 16px 12px 40px; background: var(--fondo-2); border-right: 1px solid var(--borde); z-index: 15;
}
.menu h3 { margin: 22px 0 6px; padding: 9px 10px 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--azul); background: var(--azul-claro); border-radius: 6px; border-left: 4px solid var(--azul-app); }
.menu h3:first-child { margin-top: 4px; }
.menu a { display: block; padding: 6px 10px 6px 18px; border-radius: 6px; color: var(--texto); font-size: 14.5px; line-height: 1.35; }
.menu a:hover { background: var(--azul-claro); text-decoration: none; }
.menu a.actual { background: var(--azul-claro); color: var(--azul); font-weight: 600; }

/* Contenido */
.contenido { margin-left: var(--ancho-menu); padding: calc(var(--alto-cabecera) + 28px) 48px 64px; }
.contenido > article { max-width: 880px; margin: 0 auto; }
.migas { font-size: 13px; color: var(--texto-2); margin-bottom: 6px; }
h1 { font-size: 32px; line-height: 1.2; margin: 0 0 10px; color: var(--azul); }
h2 { font-size: 22px; margin: 40px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--borde); color: var(--azul); }
h3 { font-size: 18px; margin: 28px 0 8px; }
p.entradilla { font-size: 18px; color: var(--texto-2); margin-top: 0; }
ol, ul { padding-left: 24px; }
li { margin: 4px 0; }
ol.pasos { counter-reset: paso; list-style: none; padding-left: 0; }
ol.pasos > li { counter-increment: paso; position: relative; padding-left: 44px; margin: 14px 0; }
ol.pasos > li::before {
  content: counter(paso); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%;
  background: var(--azul-app); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: 14px;
}
kbd, .boton {
  display: inline-block; padding: 1px 7px; border-radius: 5px; font: 600 13.5px/1.6 inherit;
  background: var(--azul-app); color: #fff; white-space: nowrap;
}
kbd { background: var(--fondo-2); color: var(--texto); border: 1px solid var(--borde); font-family: Consolas, monospace; }
.campo { font-weight: 600; }
figure { margin: 22px 0; }
figure img {
  display: block; width: 100%; height: auto; border: 1px solid var(--borde); border-radius: 8px;
  box-shadow: var(--sombra); cursor: zoom-in; background: #fff;
}
figure.movil img { max-width: 300px; margin: 0 auto; }
figcaption { margin-top: 8px; font-size: 13.5px; color: var(--texto-2); text-align: center; }
.nota, .consejo, .aviso {
  border-left: 4px solid var(--azul-app); background: var(--nota); padding: 12px 16px; border-radius: 0 8px 8px 0; margin: 18px 0;
}
.nota strong:first-child, .consejo strong:first-child, .aviso strong:first-child { display: block; margin-bottom: 2px; }
.consejo { border-color: #2EA44F; }
.aviso { border-color: var(--aviso-borde); background: var(--aviso); }
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { background: var(--azul-claro); color: var(--azul); font-weight: 600; }
.tabla-scroll { overflow-x: auto; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; }
.tarjeta {
  display: block; padding: 16px 18px; border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo);
  color: var(--texto); box-shadow: var(--sombra);
}
.tarjeta:hover { border-color: var(--azul-app); text-decoration: none; }
.tarjeta b { display: block; color: var(--azul); margin-bottom: 4px; }
.tarjeta span { font-size: 14px; color: var(--texto-2); }
.flujo { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0; }
.flujo span { padding: 6px 12px; background: var(--azul-claro); color: var(--azul); border-radius: 20px; font-weight: 600; font-size: 14px; }
.flujo i { color: var(--texto-2); font-style: normal; }
details { border: 1px solid var(--borde); border-radius: 8px; padding: 0 16px; margin: 10px 0; background: var(--fondo); }
details summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
details[open] summary { border-bottom: 1px solid var(--borde); margin-bottom: 8px; }
.ver-tambien { margin-top: 40px; padding: 14px 18px; background: var(--fondo-2); border-radius: 8px; }
.ver-tambien b { display: block; margin-bottom: 6px; }
.anterior-siguiente { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--borde); }
.anterior-siguiente a { display: block; max-width: 48%; }
.anterior-siguiente small { display: block; color: var(--texto-2); }
.pie { margin-top: 56px; font-size: 13px; color: var(--texto-2); text-align: center; }

/* Visor de imágenes */
.visor { position: fixed; inset: 0; background: rgba(8, 14, 22, .88); z-index: 50; display: none; place-items: center; padding: 24px; cursor: zoom-out; }
.visor.abierto { display: grid; }
.visor img { max-width: 100%; max-height: 100%; border-radius: 6px; background: #fff; }

/* Página "Qué hace el programa" */
.destacado { display: flex; gap: 14px; align-items: center; margin: 22px 0; padding: 16px 20px; border-radius: 12px;
  background: var(--azul-claro); color: var(--texto); border: 1px solid var(--azul-app); }
.destacados { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 22px 0; }
.destacados .destacado { margin: 0; }
.destacado:hover { text-decoration: none; box-shadow: var(--sombra); }
.destacado svg { flex: none; width: 34px; height: 34px; color: var(--azul-app); }
.destacado b { display: block; color: var(--azul); font-size: 17px; }
.destacado span { font-size: 14.5px; color: var(--texto-2); }

.ico { width: 1.15em; height: 1.15em; vertical-align: -.2em; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.fases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 22px 0; }
.fase { position: relative; padding: 16px 18px 18px; border: 1px solid var(--borde); border-top: 5px solid var(--azul-app); border-radius: 10px; background: var(--fondo); box-shadow: var(--sombra); }
.fase:not(:last-child)::after { content: "→"; position: absolute; right: -22px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--texto-2); }
.fase small { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.fase b { display: block; font-size: 20px; color: var(--azul); margin: 2px 0 6px; }
.fase p { margin: 0 0 10px; font-size: 14.5px; color: var(--texto-2); }
.fase .pregunta { font-style: italic; color: var(--texto); }
.fase ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fase li { margin: 0; }
.fase li a { display: inline-block; padding: 3px 10px; border-radius: 20px; background: var(--azul-claro); color: var(--azul); font-size: 13.5px; font-weight: 600; }
.fase li a:hover { text-decoration: none; background: var(--azul-app); color: #fff; }

.etapas { list-style: none; padding: 0; margin: 24px 0; }
.etapa { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 20px; padding-bottom: 36px; margin: 0; }
.etapa::before { content: ""; position: absolute; left: 19px; top: 42px; bottom: 6px; width: 2px; background: var(--azul-claro); }
.etapa:last-child { padding-bottom: 0; }
.etapa:last-child::before { display: none; }
.etapa-num { width: 40px; height: 40px; border-radius: 50%; background: var(--azul-app); color: #fff; font-weight: 700; font-size: 18px; display: grid; place-items: center; }
.etapa-fase { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-2); }
.etapa h3 { margin: 2px 0 6px; font-size: 20px; color: var(--azul); }
.etapa p { margin: 6px 0; }
.etapa .resultado { padding: 8px 12px; border-radius: 8px; background: var(--nota); font-size: 15px; }
.etapa .enlaces { font-size: 14.5px; color: var(--texto-2); }
.etapa figure { grid-column: 2; margin: 12px 0 0; }
.etapa figure img { box-shadow: var(--sombra); }
.etapa figcaption { font-size: 12.5px; }

.comparativa { margin: 20px 0; padding: 18px 20px; border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo-2); }
.comparativa h4 { margin: 0 0 12px; font-size: 15px; color: var(--texto-2); font-weight: 600; }
.comp-fila { margin: 14px 0; }
.comp-fila > b { display: block; font-size: 15px; }
.comp-fila > small { display: block; color: var(--texto-2); margin-bottom: 6px; }
.barra { display: grid; grid-template-columns: 70px 1fr 80px; gap: 10px; align-items: center; font-size: 13.5px; margin: 3px 0; }
.barra .pista { height: 14px; border-radius: 7px; background: var(--fondo); border: 1px solid var(--borde); overflow: hidden; }
.barra .pista i { display: block; height: 100%; border-radius: 7px; background: var(--azul-app); }
.barra.prev .pista i { background: var(--previsto); }
.barra.sobre .pista i { background: var(--malo); }
.barra span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.comp-total { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.comp-total div { padding: 10px 12px; border-radius: 8px; background: var(--fondo); border: 1px solid var(--borde); }
.comp-total small { display: block; color: var(--texto-2); font-size: 12.5px; }
.comp-total b { font-size: 19px; font-variant-numeric: tabular-nums; }
.comp-total .gana b { color: var(--bueno); }
.comparativa .leyenda { margin: 12px 0 0; font-size: 13px; color: var(--texto-2); }

.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin: 18px 0; }
.rol { padding: 16px; border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo); }
.rol svg { width: 30px; height: 30px; color: var(--azul-app); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rol b { display: block; margin: 6px 0 2px; color: var(--azul); }
.rol p { margin: 0 0 8px; font-size: 14px; color: var(--texto-2); line-height: 1.45; }
.rol a { font-size: 14px; font-weight: 600; }

/* Historial de versiones */
.version-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.version-cab small { font-size: 14px; font-weight: 400; color: var(--texto-2); }
.version-resumen { margin: -4px 0 12px; color: var(--texto-2); font-style: italic; }
.cambios { list-style: none; padding: 0; margin: 10px 0; }
.cambios > li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.cambios > li:last-child { border-bottom: 0; }
.etiqueta { display: inline-block; margin-right: 8px; padding: 0 9px; border-radius: 10px; font-size: 12px; font-weight: 700; line-height: 1.7; vertical-align: 1px;
  background: var(--azul-claro); color: var(--azul); white-space: nowrap; }
.etiqueta.novedad { background: var(--et-nov-bg); color: var(--et-nov); }
.etiqueta.correccion { background: var(--et-cor-bg); color: var(--et-cor); }
.cambios .mas { display: block; margin-top: 2px; font-size: 14px; }
.version-actual { margin-left: 6px; padding: 0 9px; border-radius: 10px; background: var(--azul-app); color: #fff; font-size: 12px; font-weight: 700; vertical-align: 2px; }

@media (max-width: 800px) {
  .fases { grid-template-columns: 1fr; gap: 28px; }
  .fase:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -30px; transform: translateX(-50%); }
  .etapa { grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; }
  .barra { grid-template-columns: 58px 1fr 68px; }
  .comp-total { grid-template-columns: 1fr; }
}

/* Móvil */
@media (max-width: 960px) {
  .boton-menu { display: inline-grid; }
  .menu { transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sombra); }
  .menu.abierto { transform: none; }
  .contenido { margin-left: 0; padding: calc(var(--alto-cabecera) + 20px) 16px 48px; }
  .cabecera { padding: 0 12px; gap: 10px; }
  .cabecera .marca span { display: none; }
  h1 { font-size: 26px; }
}
@media print {
  .cabecera, .menu, .anterior-siguiente { display: none; }
  .contenido { margin: 0; padding: 0; }
}