/* Colores, elementos y tipografía de la Memoria de Gestión (plantilla/MemoriaGestion2025.pptx). */
:root {
  --verde: #4E8A46;
  --verde-oscuro: #3b6b35;
  --lima: #BBCF35;
  --lima-claro: #e4ebb4;
  --fondo: #E7E7E7;          /* fondo de las diapositivas */
  --gris: #E7E7E7;
  --linea: #dcdcdc;
  --texto: #363636;
  --tenue: #6b6b6b;
  --rojo: #b3261e;
  --ambar: #8a5a00;
  --radio: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--fondo); color: var(--texto); font: 15px/1.5 Nunito, "Segoe UI", system-ui, sans-serif; }
main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px 16px 48px; }
h1, h2, h3 { font-family: Raleway, "Segoe UI", system-ui, sans-serif; font-weight: 800; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.8rem; color: var(--verde); }
h2 { font-size: 1.2rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
h2 > .i { color: var(--verde); font-size: 1.35rem; }
h3 { font-size: 1rem; margin-top: 1.2em; }
h3 small, .ayuda, small { color: var(--tenue); font-weight: 400; }
a { color: var(--verde-oscuro); }

/* Los tres guiones lima que acompañan cada título de la presentación. */
.guiones { display: inline-flex; gap: 5px; }
.guiones i, .encabezado h1::after { display: block; width: 16px; height: 6px; border-radius: 3px; background: var(--lima); }
.encabezado h1::after { content: ""; margin-top: 10px; width: 16px; box-shadow: 21px 0 var(--lima), 42px 0 var(--lima); }

/* Íconos: SVG o PNG de línea usados como máscara, en el color del texto. */
.i { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; background: currentColor;
     -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
button .i, .boton .i, nav .i, td a .i, .ayuda .i, .etiqueta .i, .pendiente .i { margin-right: 6px; }
.etiqueta .i { width: 1em; height: 1em; margin-right: 4px; }
.i-subir { --i: url(marca/iconos/subir.svg); } .i-bajar { --i: url(marca/iconos/bajar.svg); }
.i-izquierda { --i: url(marca/iconos/izquierda.svg); } .i-derecha { --i: url(marca/iconos/derecha.svg); }
.i-quitar { --i: url(marca/iconos/quitar.svg); } .i-agregar { --i: url(marca/iconos/agregar.svg); }
.i-descargar { --i: url(marca/iconos/descargar.svg); } .i-enviar { --i: url(marca/iconos/enviar.svg); }
.i-foto { --i: url(marca/iconos/foto.svg); } .i-basura { --i: url(marca/iconos/basura.svg); }
.i-salir { --i: url(marca/iconos/salir.svg); } .i-usuarios { --i: url(marca/iconos/usuarios.svg); }
.i-cuenta { --i: url(marca/iconos/cuenta.svg); } .i-panel { --i: url(marca/iconos/panel.svg); }
.i-editar { --i: url(marca/iconos/editar.svg); } .i-alerta { --i: url(marca/iconos/alerta.svg); }
.i-check { --i: url(marca/iconos/check.svg); } .i-reloj { --i: url(marca/iconos/reloj.svg); }
/* Íconos tomados de la presentación. */
.i-idea { --i: url(marca/iconos/idea.svg); } .i-documento { --i: url(marca/iconos/documento.svg); }
.i-ver { --i: url(marca/iconos/ver.svg); } .i-revision { --i: url(marca/iconos/revision.svg); }
.i-aprobado { --i: url(marca/iconos/aprobado.png); }
.i-dep-auditoria { --i: url(marca/iconos/auditoria.svg); } .i-dep-seguros { --i: url(marca/iconos/seguros.png); }
.i-dep-ti { --i: url(marca/iconos/ti.png); } .i-dep-gestion_humana { --i: url(marca/iconos/gestion_humana.png); }
.i-dep-contabilidad { --i: url(marca/iconos/contabilidad.png); } .i-dep-atencion_usuario { --i: url(marca/iconos/atencion_usuario.svg); }
.i-dep-jornadas { --i: url(marca/iconos/jornadas.svg); } .i-dep-marketing { --i: url(marca/iconos/marketing.png); }

/* Ícono del departamento en un círculo, como en sus diapositivas. */
.dep-icono { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--verde); color: #fff; vertical-align: middle; }
.dep-icono .i { width: 74%; height: 74%; }
.dep-icono.logo { background: #fff; box-shadow: inset 0 0 0 1px var(--linea); }
.dep-icono.logo img { width: 80%; height: 80%; object-fit: contain; }
.dep-icono.grande { width: 72px; height: 72px; }
td.con-icono { font-weight: 600; }
td.con-icono .dep-icono { margin-right: 10px; }
.titulo-dep { display: flex; gap: 16px; align-items: center; }
.titulo-dep h1 { margin-bottom: 2px; }

/* Encabezado: logo SSV blanco sobre verde, con la franja lima de la plantilla. */
.barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 24px; background: var(--verde); color: #fff; border-bottom: 5px solid var(--lima); }
.barra a { color: #fff; text-decoration: none; }
.marca { display: flex; gap: 14px; align-items: center; font-family: Raleway, sans-serif; font-weight: 800; font-size: 1.05rem; }
.marca img { height: 42px; width: auto; }
.marca > span { border-left: 1px solid rgba(255,255,255,.45); padding-left: 14px; line-height: 1.2; }
.marca small { display: block; font-weight: 400; font-size: .75rem; color: #e8f0d0; }
.barra nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.barra nav a { display: inline-flex; align-items: center; padding: 4px 0; border-bottom: 2px solid transparent; }
.barra nav a.activo, .barra nav a:hover { border-color: var(--lima); }
.quien { display: flex; flex-direction: column; font-size: .85rem; line-height: 1.2; border-left: 1px solid rgba(255,255,255,.4); padding-left: 14px; }
.quien small { color: #e8f0d0; font-size: .75rem; }
.barra form { margin: 0; }
.barra .enlace { color: #fff; text-decoration: none; display: inline-flex; align-items: center; }

/* Pie: como la portada, logo lima sobre gris con la franja blanca. */
.pie { background: #fff; border-top: 5px solid var(--lima); }
.pie-contenido { max-width: 1100px; margin: 0 auto; padding: 16px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.pie-contenido img { height: 46px; width: auto; }
.pie-contenido div { display: flex; flex-direction: column; line-height: 1.3; font-size: .85rem; color: var(--tenue); }
.pie-contenido b { color: var(--verde); font-size: .95rem; }
.pie-contenido .guiones { margin-left: auto; }

/* Portada (inicio de sesión) y cabecera del panel: título lima, año, franja blanca y barras de la portada. */
.portada, .cabecera { position: relative; overflow: hidden; background: var(--gris); }
.portada { display: grid; grid-template-columns: 1fr minmax(300px, 400px); gap: 32px; align-items: center; min-height: 520px; padding: 40px 0; }
.portada h1, .cabecera h1 { color: var(--lima); font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.05; margin: 0; }
.portada-anio { font-family: Raleway, sans-serif; font-weight: 300; font-size: clamp(2rem, 4vw, 3.2rem); margin: 6px 0 22px; color: var(--texto); line-height: 1; }
.portada-franja { display: inline-block; background: #fff; color: var(--verde); margin: 0 0 18px -16px; padding: 4px 48px 4px 16px; font-size: 1.05rem; }
.portada-grafico { position: absolute; top: -40px; right: -60px; height: calc(100% + 80px); width: auto; opacity: .95; pointer-events: none; z-index: 0; }
.portada > :not(.portada-grafico), .cabecera > :not(.portada-grafico) { position: relative; z-index: 1; }
.con-portada main { max-width: none; padding: 0; }
/* Inicio de sesión: título a la izquierda y el cuadro de acceso en el centro de la pantalla. */
.con-portada .portada { grid-template-columns: 1fr minmax(320px, 400px) 1fr; padding: 48px 5vw; min-height: calc(100vh - 190px); }
.con-portada .portada h1 { font-size: clamp(2.4rem, 3.6vw, 4.4rem); margin-bottom: 28px; }
.con-portada .portada-franja { margin-left: -5vw; padding-left: 5vw; }
.con-portada .acceso { grid-column: 2; }
.acceso { margin: 0; max-width: 400px; width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.acceso h2 { color: var(--verde); }
.cabecera { border-radius: var(--radio); padding: 28px 32px 24px; margin-bottom: 20px; min-height: 230px; }
.cabecera h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.cabecera .portada-anio { margin-bottom: 14px; }
.cabecera .portada-franja { margin-left: -32px; padding-left: 32px; }
.cabecera form { margin-top: 4px; }
.cabecera select { width: auto; margin: 0; }
.cabecera .portada-grafico { height: 300px; top: -30px; right: -20px; }
/* Avance: una píldora por sección, como las barras de la portada. */
.avance { display: flex; flex-wrap: wrap; gap: 6px; max-width: 480px; margin-top: 6px; }
.avance span { width: 34px; height: 12px; border-radius: 6px; background: #fff; }
.avance .curso { background: var(--lima); }
.avance .hecha { background: var(--verde); }

.tarjeta { background: #fff; border-radius: var(--radio); padding: 20px 24px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tarjeta.estrecha { max-width: 460px; margin: 40px auto; }
.tarjeta.destacada { border-left: 6px solid var(--lima); }
.vacio { text-align: center; }
.vacio img { height: 170px; width: auto; margin-bottom: 8px; }
.vacio form { justify-content: center; }
.encabezado { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.migas { margin: 0 0 6px; font-size: .9rem; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

label { display: block; margin: 0 0 12px; font-weight: 600; }
label small { display: block; font-weight: 400; }
input, textarea, select { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid #c9c9c9; border-radius: 6px; font: inherit; color: inherit; background: #fff; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--lima); border-color: var(--verde); }
input[type=checkbox] { display: inline; width: auto; margin: 0 6px 0 0; accent-color: var(--verde); }
input[type=radio] { display: inline; width: auto; margin: 0 5px 0 0; padding: 0; vertical-align: middle; accent-color: var(--verde); }
input[type=range] { padding: 0; border: 0; accent-color: var(--verde); }
input[type=file] { border-style: dashed; background: #fafafa; }
label.check { font-weight: 600; display: flex; align-items: center; }
:disabled { opacity: .7; cursor: not-allowed; }

/* Botones redondeados como las barras de la portada. */
button, .boton { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; border: 1.5px solid var(--verde); border-radius: 99px; background: #fff; color: var(--verde-oscuro); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1.3; }
button:hover, .boton:hover { background: #f3f7e6; }
button.primario { background: var(--verde); color: #fff; }
button.primario:hover { background: var(--verde-oscuro); }
button.enlace { border: 0; padding: 0; border-radius: 0; background: none; color: var(--verde-oscuro); font-weight: 600; text-decoration: underline; }
button.enlace.peligro { color: var(--rojo); }
button.solo-icono { width: 34px; height: 34px; padding: 0; }
button.solo-icono .i { margin: 0; }
.en-linea { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.en-linea form, .en-linea label { margin: 0; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 20px; align-items: start; }

.alerta { padding: 12px 16px; border-radius: var(--radio); margin-bottom: 16px; border-left: 5px solid; background: #fff; }
.alerta ul { margin: 6px 0 0; padding-left: 20px; }
.alerta.ok { border-color: var(--verde); background: #eef5e8; }
.alerta.error { border-color: var(--rojo); background: #fbeceb; }
.alerta.aviso { border-color: #d9a400; background: #fdf6e0; }
.alerta.info { border-color: #7a8c99; background: #eef2f5; }
code.clave { font-size: 1.15rem; background: #fff; padding: 2px 8px; border-radius: 4px; user-select: all; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--gris); vertical-align: middle; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--verde); border-bottom: 2px solid var(--lima); }
tbody tr:hover { background: #fafbf5; }
tr.inactivo td { color: var(--tenue); }
td a { display: inline-flex; align-items: center; font-weight: 600; }
details summary { cursor: pointer; color: var(--verde-oscuro); font-weight: 600; }
.etiqueta { display: inline-flex; align-items: center; padding: 1px 10px; border-radius: 99px; background: #fdf0c4; color: var(--ambar); font-size: .78rem; font-weight: 700; }
.etiqueta.ok { background: #dcebd5; color: var(--verde-oscuro); }
.etiqueta.vacia { background: var(--gris); color: var(--tenue); }
.pendiente { display: inline-flex; align-items: center; color: var(--ambar); margin-top: 3px; }
.estado { font-weight: 700; }
.estado.aprobado { color: var(--verde-oscuro); }

/* Pasos de aprobación como barras redondeadas. */
.pasos { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; counter-reset: paso; }
.pasos li { flex: 1; position: relative; padding: 14px 4px 0; color: var(--tenue); font-weight: 600; font-size: .9rem; counter-increment: paso; }
.pasos li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 8px; border-radius: 4px; background: #fff; }
.pasos li.hecho::before { background: var(--verde); }
.pasos li.hecho { color: var(--verde-oscuro); }
.pasos li.actual::before { background: var(--lima); }
.pasos li.actual { color: var(--texto); font-weight: 800; }

.historial { list-style: none; padding: 0; margin: 0; }
.historial li { padding: 8px 0; border-bottom: 1px solid var(--gris); }
blockquote { margin: 6px 0 0; padding: 6px 12px; border-left: 3px solid var(--lima); background: #fafaf5; }

.filas { list-style: none; padding: 0; margin: 0 0 12px; counter-reset: logro; }
.fila { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--gris); }
.fila .num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--verde); color: #fff; font-family: Raleway, sans-serif; font-weight: 800; font-size: 1.1rem; }
.fila .campos input { margin: 0 0 6px; font-weight: 700; }
.fila .campos textarea { margin: 0; }
.mover { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.contador { display: block; text-align: right; font-size: .75rem; color: var(--tenue); margin: 2px 0 0; }
.contador.cerca { color: var(--ambar); font-weight: 700; }

.foto-logro { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: #f6f8ef; border-left: 4px solid var(--lima); }
.pregunta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-weight: 700; font-size: .92rem; }
.pregunta label { display: inline-flex; align-items: center; margin: 0; font-weight: 600; }
.fotos-logro { margin: 10px 0 8px; }
.foto-logro [data-agregar-foto] { margin-top: 4px; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 12px; }
.evidencia { border: 1px solid var(--gris); border-radius: var(--radio); padding: 10px; background: #fafafa; }
.evidencia input { margin-top: 6px; }
.fila .campos .evidencia input { font-weight: 400; margin: 2px 0 0; }
.evidencia .zoom { font-weight: 400; font-size: .85rem; margin: 8px 0 0; }
.evidencia label.corto { font-size: .85rem; margin: 8px 0 0; }
.evidencia label.corto select, .evidencia label.corto input { margin-top: 2px; padding: 5px 8px; }
.evidencia .check.pequeno { font-size: .85rem; font-weight: 400; margin: 4px 0 0; }
.evidencia .mover { margin-top: 8px; }
.evidencia.borrada { opacity: .45; }
.evidencia.nueva { border-style: dashed; border-color: var(--verde); background: #fff; }
.evidencia .subir { font-size: .85rem; }
.marco { position: relative; width: 100%; background: var(--gris) no-repeat; cursor: crosshair; overflow: hidden; }
.marco.foto { aspect-ratio: 500 / 320; }                  /* hueco de las fotos generales */
.fotos-logro .marco.foto { aspect-ratio: 530 / 323; }     /* hueco junto al logro */
.marco.retrato { aspect-ratio: 1; border-radius: 50%; width: 75%; margin: 0 auto; }
.marco .punto { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid #fff; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 1px rgba(0,0,0,.4); pointer-events: none; }
.nota { margin: 6px 0 0; font-size: .82rem; color: var(--ambar); }
.borrar { font-weight: 400; font-size: .85rem; margin: 0 0 0 auto; display: flex; align-items: center; }
.subir { max-width: 520px; }
.acciones { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; position: sticky; bottom: 0; border-top: 4px solid var(--lima); }
.acciones label { margin: 0; }

@media (max-width: 760px) {
  .portada, .con-portada .portada { grid-template-columns: 1fr; min-height: 0; }
  .con-portada .acceso { grid-column: 1; max-width: none; }
  .portada-grafico { opacity: .25; }
  .cabecera .portada-grafico { opacity: .3; }
}
@media (max-width: 640px) {
  .barra { padding: 10px 16px; }
  .marca img { height: 34px; }
  .tarjeta { padding: 16px; }
  .cabecera { padding: 22px 16px; }
  .cabecera .portada-franja { margin-left: -16px; padding-left: 16px; }
  .fila { grid-template-columns: 42px 1fr; }
  .fila .mover { grid-column: 2; }
  th:nth-child(n+3):not(:last-child), td:nth-child(n+3):not(:last-child) { display: none; }
  .pie-contenido .guiones { display: none; }
}
[hidden] { display: none !important; }

/* Tarjeta de foto compacta: forma y zoom en una fila, el pie con su «Sin pie» al lado. */
.evidencia { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; align-content: start; }
.evidencia > * { grid-column: 1 / -1; }
.evidencia > .mitad { grid-column: auto; }
.evidencia .zoom { margin: 8px 0 0; font-weight: 600; }
.evidencia .zoom input { margin-top: 10px; }
.campo-pie { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 0; font-size: .85rem; font-weight: 600; }
.campo-pie .check.pequeno { margin: 0; }
.evidencia [data-pie] { margin-top: 2px; padding: 5px 8px; }

.grupo-avisos { margin: 10px 0 0; }
.grupo-avisos + ul { margin: 2px 0 0; padding-left: 20px; }
.filtros { margin-bottom: 14px; align-items: flex-end; }
.filtros select { min-width: 200px; }
.paginas { margin-top: 14px; justify-content: center; }

/* En el celular las tablas se convierten en tarjetas: no se esconde ningún dato. */
@media (max-width: 640px) {
  table.tabla-tarjetas thead { display: none; }
  table.tabla-tarjetas, table.tabla-tarjetas tbody, table.tabla-tarjetas tr, table.tabla-tarjetas td { display: block; width: 100%; }
  table.tabla-tarjetas tr { padding: 12px 0; border-bottom: 1px solid var(--linea); }
  table.tabla-tarjetas td { border: 0; padding: 3px 0; }
  table.tabla-tarjetas td:nth-child(n) { display: block; }
  table.tabla-tarjetas td[data-etiqueta] { position: relative; padding-left: 118px; min-height: 1.6em; }
  table.tabla-tarjetas td[data-etiqueta]::before { content: attr(data-etiqueta); position: absolute; left: 0; top: 5px; width: 110px; color: var(--tenue); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
  table.tabla-tarjetas td.con-icono { font-size: 1.05rem; margin-bottom: 4px; }
  table.tabla-tarjetas td.accion { padding-top: 8px; }
}
.boton.primario-enlace { background: var(--verde); color: #fff; }
.boton.primario-enlace:hover { background: var(--verde-oscuro); }

/* Lista de cuentas necesarias y lista de credenciales recién creadas. */
.requisitos { list-style: none; padding: 0; margin: 0 0 14px; }
.requisitos li { padding: 6px 0; }
.requisitos li .i { margin-right: 6px; }
.requisitos li.listo .i { color: var(--verde); }
.requisitos li.falta .i { color: var(--ambar); }
.requisitos small { display: block; margin-left: 1.6em; }
.credenciales table { margin: 10px 0; background: #fff; }
.credenciales code { font-size: 1rem; }
@media print { .barra, .pie, nav, .tarjeta { display: none !important; } .credenciales { border: 0; } }