/* ==========================================================================
   NEXORA · TEMA (sistema visual de las aplicaciones de Juan José: Mesa de Ayuda,
   Informe MCI, Informe de Metas, AutoZip). Se carga después de estilo.css y lo
   sobrescribe: mismos colores del logo (azul #0057FF → turquesa #00D4C8, marino
   #0A1F44), botones con degradado, tarjetas con sombra, tablas de cabecera marina.
   ========================================================================== */
:root {
  --azul: #0057FF;
  --azul-2: #1F7BFF;
  --turquesa: #00D4C8;
  --marino: #0A1F44;
  --marino-2: #13305F;
  --gradiente: linear-gradient(135deg, #0057FF 0%, #00A3E0 55%, #00D4C8 100%);
  --tarjeta: #FFFFFF;
  --texto-2: #5B6B85;
  --exito: #10A36B;
  --alerta: #E8A317;
  --sombra: 0 4px 18px rgba(10, 31, 68, .08);

  /* Los tokens de siempre de NEXORA, llevados a la nueva paleta */
  --nx-azul: #0057FF;
  --nx-cian: #00D4C8;
  --nx-oscuro: #0A1F44;
  --fondo: #F3F6FB;
  --superficie: #FFFFFF;
  --superficie-2: #F6F9FE;
  --borde: #DCE4F0;
  --texto: #0A1F44;
  --muted: #5B6B85;
  --acento: #0057FF;
  --acento-suave: #EAF2FF;
  --acento-texto: #1747A6;
  --ok: #0B7A50; --ok-suave: #E3F7EE;
  --aviso: #A26A00; --aviso-suave: #FFF3DA;
  --error: #B4203A; --error-suave: #FDE7EA;
  --sidebar: #0A1F44;
  --sidebar-texto: #D5E3F7;
  --radio: 14px;
  --fuente: "Segoe UI", "Montserrat", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --fuente-titulos: "Segoe UI", "Montserrat", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
body { font-size: 15px; }
h1, h2, h3 { color: var(--marino); }
h1 { font-size: 26px; font-weight: 700; letter-spacing: 0; }
h3 { font-size: 15px; font-weight: 700; }

/* ---------- Barra lateral ---------- */
.layout { background: var(--marino); }
.sidebar { width: 250px; padding: 0 10px 14px; background: linear-gradient(180deg, #0A1F44 0%, #0B2A5C 100%); color: #fff; }
.marca { gap: 12px; padding: 22px 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 19px; letter-spacing: 2px; }
.marca-n { width: 36px; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar nav a { position: relative; padding: 11px 14px; border-radius: 10px; color: #D5E3F7; font-weight: 600; font-size: 14px; }
.sidebar nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sidebar nav a i { font-size: 19px; opacity: .85; }
.sidebar nav a.activo { background: var(--gradiente); color: #fff; box-shadow: 0 4px 14px rgba(0, 87, 255, .35); font-weight: 600; }
.sidebar nav a.activo i { opacity: 1; }
.sidebar nav a.activo::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--turquesa); box-shadow: 0 0 10px var(--turquesa); }
.sidebar nav a.sub { padding: 8px 14px 8px 26px; font-weight: 500; font-size: 13.5px; }
.nav-titulo { color: #7F9CC6; font-weight: 700; letter-spacing: 1.6px; }

/* ---------- Área de trabajo con fondo tecnológico ---------- */
.contenido { padding: 0 34px 50px; background:
  radial-gradient(circle at 85% 0%, rgba(0, 212, 200, .08), transparent 40%),
  radial-gradient(circle at 30% 100%, rgba(0, 87, 255, .07), transparent 45%),
  linear-gradient(rgba(10, 31, 68, .025) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(90deg, rgba(10, 31, 68, .025) 1px, transparent 1px) 0 0 / 28px 28px,
  var(--fondo); }
.topbar { border-bottom: 1px solid #E3EAF5; padding: 14px 0; }
.quien strong { color: var(--marino); }
.topbar-acciones a, .campana-btn { color: var(--marino-2); font-weight: 600; }
.topbar-acciones a:hover { color: var(--azul); text-decoration: none; }

/* ---------- Cabeceras ---------- */
.encabezado { margin-bottom: 22px; }
.encabezado p { color: var(--texto-2); }
.migas { font-size: 13px; color: var(--texto-2); margin-bottom: 6px; }
.migas a { color: var(--azul); }
.btn-volver { display: inline-flex; align-items: center; gap: 6px; color: var(--azul); font-weight: 600; margin-bottom: 8px; }
.btn-volver:hover { text-decoration: none; filter: brightness(1.1); }
.vista-header { margin-bottom: 22px; }
.vista-header h1 { margin: 0; font-size: 26px; }
.vista-header p { margin: 4px 0 0; color: var(--texto-2); }
.vista-header .vh-fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }

/* ---------- Botones ---------- */
.btn { font-weight: 600; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--borde); background: #fff; color: var(--marino);
  justify-content: center; transition: border-color .15s, color .15s, box-shadow .15s, filter .15s; }
.btn:hover { border-color: var(--azul); color: var(--azul); }
.btn i { font-size: 17px; }
.btn-primario { background: var(--gradiente); border: 0; color: #fff; }
.btn-primario:hover { color: #fff; filter: brightness(1.06); box-shadow: 0 4px 14px rgba(0, 87, 255, .3); }
.btn-peligro { color: var(--error); }
.btn-peligro:hover { border-color: var(--error); color: var(--error); }
.btn-sm, .btn-chico { padding: 6px 12px; font-size: 13px; }
.btn-sm i, .btn-chico i { font-size: 15px; }
.btn-ancho { padding: 12px; }
.btn-vidrio { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
.btn-vidrio:hover { background: rgba(255, 255, 255, .16); color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-link { color: var(--azul); font-weight: 600; }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; filter: none; box-shadow: none; }

/* ---------- Tarjetas, KPIs, avisos ---------- */
.tarjeta { border: 0; border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px 22px; margin-bottom: 16px; }
.tarjeta h3 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.tarjeta h3 i { color: var(--azul); font-size: 19px; }
.kpis { gap: 14px; margin-bottom: 18px; }
.kpi { border: 0; border-top: 4px solid var(--azul); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px 18px; }
.kpi span { font-size: 12.5px; color: var(--texto-2); }
.kpi strong { font-size: 28px; font-weight: 700; color: var(--marino); }
.kpi-alerta { border-top-color: var(--alerta); }
.alerta { border-radius: 10px; padding: 11px 14px; }
.alerta-ok { background: #E3F7EE; color: #0B7A50; }
.alerta-error { background: #FDE7EA; color: #B4203A; }
.alerta-aviso { background: #FFF3DA; color: #A26A00; }
.alerta-info { background: #EAF2FF; color: #1747A6; }
.contexto { background: #EAF2FF; color: #1747A6; border-radius: 10px; }
.pill { padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; border: 0; background: #ECEFF4; color: #56637A; }
.pill-ok { background: #E3F7EE; color: #0B7A50; }
.pill-aviso { background: #FFF3DA; color: #A26A00; }
.pill-error { background: #FDE7EA; color: #B4203A; }
.pill-acento { background: #E5EEFF; color: #1A4FD6; }

/* ---------- Formularios ---------- */
.form label { color: var(--marino-2); font-weight: 600; }
input, select, textarea { border-radius: 10px; padding: 10px 12px; background: #fff; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(0, 87, 255, .12); }
input[type=checkbox], input[type=radio] { accent-color: var(--azul); }
fieldset { border-radius: 12px; }
legend i { color: var(--turquesa); }

/* ---------- Tablas: cabecera marina ---------- */
.tabla-wrap { border: 0; border-radius: var(--radio); box-shadow: var(--sombra); }
.tarjeta .tabla-wrap { box-shadow: none; border: 1px solid #E3EAF5; }
table { font-size: 13.5px; }
th { background: var(--marino); color: #fff; font-size: 13px; text-transform: none; letter-spacing: 0; padding: 11px 12px; border-bottom: 0; white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid #EDF1F7; vertical-align: middle; }
tbody tr:nth-child(even) td { background: #F8FAFE; }
tbody tr:hover td { background: #EEF4FF; }
.fila-grupo td { background: #EEF4FF !important; color: var(--azul); letter-spacing: 1px; }

/* ---------- Menú de módulos y aplicaciones ---------- */
.grupo-apps h2, .seccion-tit { font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--marino); }
.grilla-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.modulo { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: start; position: relative; overflow: hidden;
  border: 1px solid #E3EAF5; border-radius: 18px; padding: 20px 22px; color: var(--texto); box-shadow: 0 6px 22px rgba(10, 31, 68, .06);
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #E3EAF5, #E3EAF5) border-box; transition: transform .15s, box-shadow .15s; }
.modulo::before { display: none; }
.modulo::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 200, .12), transparent 70%); transition: transform .3s; pointer-events: none; }
a.modulo:hover { text-decoration: none; transform: translateY(-4px); border-color: transparent; box-shadow: 0 14px 32px rgba(0, 87, 255, .14);
  background: linear-gradient(#fff, #fff) padding-box, var(--gradiente) border-box; }
a.modulo:hover::after { transform: scale(1.4); }
.modulo .modulo-icono { grid-row: span 3; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 27px;
  background: var(--gradiente); color: #fff; box-shadow: 0 6px 16px rgba(0, 163, 224, .3); padding: 0; }
.modulo-nombre { margin: 4px 0 4px; font-size: 16px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--marino); }
.modulo-nombre span { display: none; }
.modulo p { margin: 0; color: var(--texto-2); font-size: 13.5px; }
.modulo-total { background: none; border-radius: 0; width: auto; padding: 10px 0 0; margin-top: auto; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--azul); }
.modulo-total i { transition: transform .15s; }
a.modulo:hover .modulo-total i { transform: translateX(4px); }
.modulo-proximo { opacity: .75; }
.modulo-proximo .modulo-icono { background: #E3EAF5; color: var(--texto-2); box-shadow: none; }
.titulo-modulo { display: flex; align-items: center; gap: 18px; }
.titulo-modulo .modulo-icono { width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center; font-size: 36px;
  background: var(--gradiente); color: #fff; box-shadow: 0 6px 16px rgba(0, 87, 255, .28); padding: 0; }
.grilla-apps { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.app { position: relative; align-items: center; border: 0; border-left: 4px solid var(--azul); border-radius: 12px; padding: 16px 40px 16px 18px;
  box-shadow: var(--sombra); transition: border-color .15s, transform .15s, box-shadow .15s; }
.app::after { content: "\203A"; position: absolute; right: 16px; top: 50%; margin-top: -15px; font-size: 26px; line-height: 1; color: var(--azul); }
.app:hover { border-left-color: var(--turquesa); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 87, 255, .12); }
.app-icono { width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center; padding: 0; font-size: 23px;
  background: #EEF4FF; color: var(--azul); }
.app-nombre { font-weight: 700; color: var(--marino); }
.app-desc { font-size: 13.5px; color: var(--texto-2); }
.paso-num { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 14px; background: var(--gradiente);
  color: #fff; font-size: 12.5px; font-weight: 700; border: 0; }

/* ---------- Hero tecnológico ---------- */
.hero-tec {
  position: relative; overflow: hidden; border-radius: 24px; padding: 34px 38px; margin-bottom: 26px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 230px;
  background:
    radial-gradient(circle at 78% 50%, rgba(0, 212, 200, .35), transparent 38%),
    radial-gradient(circle at 10% 0%, rgba(0, 87, 255, .55), transparent 50%),
    linear-gradient(135deg, #071733 0%, #0A1F44 45%, #0B3470 100%);
  box-shadow: 0 18px 44px rgba(10, 31, 68, .28);
}
.hero-tec::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 32px 32px,
              linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 70%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 35%, #000 70%, transparent); }
.hero-tec::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gradiente); }
.hero-tec-txt { position: relative; z-index: 1; max-width: 640px; }
.hero-tec h1 { margin: 16px 0 8px; font-size: 34px; letter-spacing: .3px; color: #fff; }
.hero-tec p { margin: 0; color: #C9D8EE; font-size: 15.5px; }
.hero-tec-acc { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.chip-vivo { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .4px; padding: 6px 12px; border-radius: 30px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: #BFE9FF; backdrop-filter: blur(4px); }
.chip-vivo b { width: 8px; height: 8px; border-radius: 50%; background: var(--turquesa); animation: latido 1.8s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 rgba(0, 212, 200, .7); } 70% { box-shadow: 0 0 0 9px rgba(0, 212, 200, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 212, 200, 0); } }
.txt-grad { background: linear-gradient(90deg, #5FA8FF, #00D4C8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-tec-nexo { position: relative; z-index: 1; width: 190px; height: 190px; flex-shrink: 0; margin-right: 20px; }
.hero-tec-nexo img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); border-radius: 50%;
  object-fit: cover; box-shadow: 0 0 40px rgba(0, 212, 200, .45); animation: flotar 3s ease-in-out infinite; background: #0A1F44; }
.hero-tec-nexo .anillo { position: absolute; inset: 0; border-radius: 50%; padding: 3px;
  background: conic-gradient(from 0deg, #0057FF, #00D4C8, transparent 60%, #0057FF);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: girar 6s linear infinite; }
.hero-tec-nexo.pulgar { width: 210px; height: 230px; }
.hero-tec-nexo.pulgar img { inset: 0; width: 100%; height: 100%; border-radius: 24px; object-position: center 20%; animation: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 60%, transparent 100%); }
.hero-tec-nexo.pulgar .anillo { display: none; }
.nexo-tag { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; z-index: 2;
  padding: 5px 12px; border-radius: 30px; background: rgba(7, 23, 51, .85); border: 1px solid rgba(0, 212, 200, .45); color: #9FF3EC; }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- Títulos de sección ---------- */
.seccion-tec { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12.5px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--marino); }
.seccion-tec i { font-size: 16px; color: var(--azul); }
.seccion-tec::before { content: ""; width: 4px; height: 16px; border-radius: 4px; background: var(--gradiente); order: -1; }
.seccion-tec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--borde), transparent); }

/* ---------- KPIs con anillo de avance ---------- */
.kpis-tec { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; }
.kpi-tec { --tono: #0057FF; --p: 0; position: relative; overflow: hidden; background: rgba(255, 255, 255, .9); backdrop-filter: blur(6px);
  border: 1px solid #E3EAF5; border-left: 4px solid var(--tono); border-radius: 20px; padding: 18px 86px 16px 18px; min-height: 128px;
  box-shadow: 0 6px 22px rgba(10, 31, 68, .06); transition: transform .15s, box-shadow .15s; }
.kpi-tec:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 87, 255, .12); }
.kpi-tec::after { content: ""; position: absolute; right: 18px; top: 50%; width: 58px; height: 58px; margin-top: -29px; border-radius: 50%;
  background: conic-gradient(var(--tono) calc(var(--p) * 1%), #E8EEF7 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); }
.kpi-tec.sin-anillo { padding-right: 18px; }
.kpi-tec.sin-anillo::after { display: none; }
.kpi-tec.azul { --tono: #0057FF; } .kpi-tec.cian { --tono: #00A3E0; } .kpi-tec.turq { --tono: #00BFB4; }
.kpi-tec.verde { --tono: #10A36B; } .kpi-tec.rojo { --tono: #E0384B; } .kpi-tec.oro { --tono: #F5B400; }
.kpi-tec-cab { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--texto-2); font-weight: 600; }
.kpi-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: var(--tono); font-size: 19px;
  background: color-mix(in srgb, var(--tono) 12%, #fff); flex-shrink: 0; }
.kpi-tec b { display: block; font-size: 30px; white-space: nowrap; line-height: 1; margin: 12px 0 4px; font-weight: 800; color: var(--marino); letter-spacing: -.5px; }
.kpi-tec b small { font-size: 15px; color: var(--texto-2); font-weight: 600; letter-spacing: 0; }
.kpi-tec small { display: block; margin-top: 7px; font-size: 11.5px; color: #8A99B2; }

/* ---------- Accesos (tarjetas de entrada) ---------- */
.accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-bottom: 26px; }
.acceso-card { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: start; position: relative; overflow: hidden;
  border: 1px solid #E3EAF5; border-radius: 18px; padding: 20px 22px; color: var(--texto); box-shadow: 0 6px 22px rgba(10, 31, 68, .06);
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #E3EAF5, #E3EAF5) border-box; transition: transform .15s, box-shadow .15s; }
.acceso-card::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 212, 200, .12), transparent 70%); transition: transform .3s; pointer-events: none; }
.acceso-card:hover { text-decoration: none; transform: translateY(-4px); border-color: transparent; box-shadow: 0 14px 32px rgba(0, 87, 255, .14);
  background: linear-gradient(#fff, #fff) padding-box, var(--gradiente) border-box; }
.acceso-card:hover::after { transform: scale(1.4); }
.acceso-card .ico-tile { grid-row: span 3; width: 56px; height: 56px; border-radius: 50%; }
.acceso-card h3 { margin: 4px 0 4px; font-size: 16px; letter-spacing: .5px; text-transform: uppercase; }
.acceso-card p { margin: 0; color: var(--texto-2); font-size: 13.5px; }
.acceso-card .entrar { padding-top: 10px; display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--azul); }
.acceso-card .entrar i { transition: transform .15s; }
.acceso-card:hover .entrar i { transform: translateX(4px); }
.ico-tile { width: 52px; height: 52px; border-radius: 14px; background: var(--gradiente); color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0, 163, 224, .3); font-size: 26px; flex-shrink: 0; }
.ico-tile.grande { width: 72px; height: 72px; border-radius: 18px; font-size: 36px; }
.ico-sub { width: 44px; height: 44px; border-radius: 12px; background: #EEF4FF; color: var(--azul); display: grid; place-items: center; flex-shrink: 0; font-size: 23px; }

/* ---------- Pasos numerados ---------- */
.paso { background: var(--tarjeta); border-radius: var(--radio); padding: 20px 22px; box-shadow: var(--sombra); margin-bottom: 16px; }
.paso-tit { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 10px; color: var(--marino); margin: 0; }
.paso-tit .paso-num { width: 28px; min-width: 28px; padding: 0; font-size: 14px; }
.paso-sub { color: var(--texto-2); margin: 6px 0 14px 38px; font-size: 14px; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.form-grid .ancho { grid-column: 1 / -1; }
.form-grid label, .paso label.campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--marino-2); margin: 0; }

/* ---------- Zona para soltar archivos y tarjetas por archivo ---------- */
.soltar { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 2px dashed #B9CBE6; border-radius: 16px; padding: 22px;
  text-align: center; background: #F7FAFF; cursor: pointer; transition: background .15s, border-color .15s; margin-bottom: 14px; }
.soltar:hover, .soltar.encima { background: #EAF2FF; border-color: var(--azul); }
.soltar > i { font-size: 34px; color: var(--azul); }
.soltar b { font-size: 15px; color: var(--marino); }
.soltar span { font-size: 13px; color: var(--texto-2); }
.soltar input[type=file] { display: none; }
.zonas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.zona { position: relative; border: 1px solid var(--borde); border-radius: 14px; padding: 14px 14px 12px; background: #fff;
  border-top: 4px solid var(--error); display: flex; flex-direction: column; gap: 6px; transition: box-shadow .15s, transform .15s; }
.zona.lista { border-top-color: var(--exito); }
.zona.vieja { border-top-color: var(--alerta); }
.zona.encima { box-shadow: 0 0 0 3px rgba(0, 87, 255, .25); transform: translateY(-2px); }
.zona-cab { display: flex; align-items: center; gap: 10px; }
.zona-cab b { font-size: 14.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--marino); }
.zona p { margin: 0; font-size: 12.5px; color: var(--texto-2); line-height: 1.4; }
.zona .zona-arch { font-size: 12.5px; color: var(--marino-2); word-break: break-all; }
.zona .zona-arch small { display: block; color: var(--texto-2); }
.zona label.btn { align-self: flex-start; margin-top: auto; flex-direction: row; }
.zona input[type=file] { display: none; }
.archivos { display: flex; flex-direction: column; gap: 10px; }
.archivo { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px;
  border-left: 4px solid var(--exito); background: #fff; flex-wrap: wrap; }
.archivo.falta { border-left-color: var(--error); background: #FFF8F9; }
.archivo-txt { flex: 1; min-width: 200px; }
.archivo-txt b { display: block; color: var(--marino); }
.archivo-txt span { display: block; font-size: 13px; color: var(--marino-2); word-break: break-all; }
.archivo-txt small { color: var(--texto-2); font-size: 12px; }
.archivo input[type=file] { display: none; }

/* ---------- Badges ---------- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #ECEFF4; color: #56637A; }
.badge.b-ok, .badge.est-resuelto, .badge.a-tiempo { background: #E3F7EE; color: #0B7A50; }
.badge.b-error { background: #FDE7EA; color: #B4203A; }
.badge.b-alerta, .badge.est-en-espera, .badge.est-vieja { background: #FFF3DA; color: #A26A00; }
.badge.b-info, .badge.est-abierto { background: #E5EEFF; color: #1A4FD6; }
.badge.est-en-proceso { background: #DFF7F6; color: #0A8C86; }
.badge.est-cerrado, .badge.pr-baja { background: #ECEFF4; color: #56637A; }
.badge.pr-media { background: #E5EEFF; color: #1A4FD6; }
.badge.pr-alta { background: #FFEBD9; color: #B4520A; }
.badge.pr-critica { background: #FDE2E5; color: #C0182F; }
.badge.vencido { background: var(--error); color: #fff; }
.badge.interno { background: #FFF3DA; color: #A26A00; }
.punto::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.pct { display: inline-block; min-width: 54px; padding: 2px 8px; border-radius: 20px; font-weight: 700; font-size: 12.5px; text-align: center; }
.pct.ok { background: #E3F7EE; color: #0B7A50; } .pct.medio { background: #FFF3DA; color: #A26A00; } .pct.bajo { background: #FDE7EA; color: #B4203A; }
.codigo { font-weight: 700; color: var(--azul); white-space: nowrap; }
.mini { font-size: 12px; color: var(--texto-2); }

/* ---------- Resultado, tablas de IPS y bitácora ---------- */
.resultado-cab { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
  padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, #EEF4FF, #E6FBF9); border: 1px solid #D6E6FB; }
.resultado-cab h3 { margin: 2px 0; font-size: 20px; }
.tabla-ips td:first-child { font-weight: 600; }
.tabla-ips td.num, .tabla-ips th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-ips tr.sec td { background: #EEF4FF !important; color: var(--azul); font-weight: 700; font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; }
.bitacora { margin-top: 16px; border: 1px solid var(--borde); border-radius: 12px; background: #fff; }
.bitacora summary { cursor: pointer; padding: 11px 14px; font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.bitacora ul { list-style: none; margin: 0; padding: 4px 14px 14px; font-family: Consolas, "Courier New", monospace; font-size: 12.5px;
  max-height: 320px; overflow: auto; white-space: pre-wrap; }
.bitacora li { padding: 3px 0; border-bottom: 1px dashed #EDF1F7; }
.bitacora li.niv-warning { color: #A26A00; font-weight: 600; }
.bitacora li.niv-error { color: var(--error); font-weight: 700; }
.aviso-prof { border: 1px solid #F0C66B; background: #FFF8E8; border-radius: 14px; padding: 14px 16px; margin: 16px 0; }
.aviso-prof h4 { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; color: #8A5A00; }
.aviso-prof .fila-prof { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-top: 1px dashed #F0D9A6; }
.aviso-prof .fila-prof b { flex: 1; min-width: 220px; font-size: 13.5px; }
.aviso-prof select { width: auto; padding: 6px 10px; }
.novedades { margin-top: 16px; border: 1px solid #F6D3D8; border-radius: 16px; background: #FFF8F9; overflow: hidden; }
.novedades-cab { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #FDECEF; }
.novedades-cab img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: 0 4px 12px rgba(180, 32, 58, .2); }
.novedades-cab b { display: block; color: #B4203A; }
.novedades-cab span { font-size: 13px; color: var(--texto-2); }
.novedades ul { list-style: none; margin: 0; padding: 6px 16px 12px; max-height: 320px; overflow: auto; }
.novedades li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 0; border-bottom: 1px dashed #F1D5DA; }
.novedades li:last-child { border-bottom: 0; }
.vacio-nexo { text-align: center; padding: 30px 10px; color: var(--texto-2); }
.vacio-nexo img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 18px rgba(0, 87, 255, .2); }
.vacio-nexo p { margin: 12px auto 0; max-width: 380px; }

/* ---------- Cinta de etapas (AutoZip) ---------- */
.etapas { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr);
  background: #fff; border: 1px solid #E3EAF5; border-radius: 18px; box-shadow: 0 6px 22px rgba(10, 31, 68, .06); overflow: hidden; }
.paso .etapas { margin: 4px 0 6px; box-shadow: none; background: #F7FAFF; }
.etapas li { position: relative; padding: 16px 14px 14px 18px; display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; }
.etapas li + li::before { content: ""; position: absolute; left: -9px; top: 50%; width: 16px; height: 16px; margin-top: -8px; z-index: 1;
  border-top: 2px solid #CBD8EC; border-right: 2px solid #CBD8EC; transform: rotate(45deg); }
.etapa-ico { grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #EEF4FF; color: var(--azul); font-size: 19px; }
.etapas b { font-size: 13.5px; color: var(--marino); }
.etapas small { font-size: 11.5px; color: var(--texto-2); line-height: 1.3; }
.etapas li.hecha .etapa-ico { background: var(--exito); color: #fff; }
.etapas li.activa { background: linear-gradient(180deg, #EEF4FF, #fff); }
.etapas li.activa .etapa-ico { background: var(--gradiente); color: #fff; box-shadow: 0 0 0 4px rgba(0, 87, 255, .15); }

/* ---------- Mesa de ayuda: detalle, línea de tiempo y adjuntos ---------- */
.det-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.datos-tk { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 18px; }
.datos-tk div span { display: block; font-size: 12px; color: var(--texto-2); }
.datos-tk div b { font-size: 14px; }
.descripcion { white-space: pre-wrap; line-height: 1.55; margin: 0; }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 26px; border-left: 2px solid #E1E8F3; margin-left: 8px; }
.timeline li:last-child { border-left-color: transparent; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--azul); }
.timeline li.t-comentario::before { background: var(--turquesa); }
.timeline li.t-creacion::before { background: var(--marino); }
.timeline li.t-interno::before { background: #E8A317; }
.timeline .t-cab { font-size: 12.5px; color: var(--texto-2); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.timeline .t-txt { margin-top: 3px; white-space: pre-wrap; }
.timeline li.t-comentario .t-txt { background: #F3F8FF; border-radius: 10px; padding: 9px 12px; }
.timeline li.t-interno .t-txt { background: #FFF8E8; border: 1px dashed #F0C66B; border-radius: 10px; padding: 9px 12px; }
.adjuntos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; list-style: none; padding: 0; margin: 0; }
.adjunto { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--borde); border-radius: 12px; padding: 8px; color: var(--texto); background: #fff; min-width: 0; }
.adjunto:hover { border-color: var(--azul); text-decoration: none; }
.adjunto .adj-ico { height: 76px; display: grid; place-items: center; background: #EEF4FF; border-radius: 8px; font-size: 32px; color: var(--azul); }
.adjunto .adj-nom { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adjunto.interno { border-style: dashed; border-color: #E8A317; }
.subir { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px dashed #B9CBE6;
  border-radius: 10px; cursor: pointer; color: var(--azul); font-weight: 600; }
.subir:hover { background: #F3F8FF; }
.subir input { display: none; }
.prioridades { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.prio-op { display: flex; border: 2px solid var(--borde); border-radius: 12px; padding: 12px 14px; cursor: pointer; flex-direction: column; gap: 2px; font-weight: 400; margin: 0; }
.prio-op input { display: none; }
.prio-op b { font-size: 15px; color: var(--marino); }
.prio-op span { font-size: 12.5px; color: var(--texto-2); }
.prio-op:has(input:checked) { border-color: var(--azul); background: #EEF4FF; }
.pr-txt-baja { color: #56637A; } .pr-txt-media { color: #1A4FD6; } .pr-txt-alta { color: #B4520A; } .pr-txt-critica { color: #C0182F; }
.barra-fila { display: grid; grid-template-columns: 160px 1fr 36px; gap: 10px; align-items: center; margin-bottom: 9px; font-size: 13px; }
.barra-fila .nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-fondo { background: #EDF2F9; border-radius: 6px; height: 12px; overflow: hidden; }
.barra-fondo div { height: 100%; background: var(--gradiente); border-radius: 6px; }
.barra-fila .num { text-align: right; font-weight: 700; }
.graficas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }

/* ---------- Barra de progreso con el degradado ---------- */
.progreso { background: #E8EEF7; border-radius: 10px; }
.progreso-relleno { background: var(--gradiente); background-size: 200% 100%; border-radius: 10px; }

/* ---------- Identidad de cada aplicación de Juan José ---------- */
/* Informe de Metas: acento turquesa al frente y motivo de diana */
.tema-metas { --gradiente: linear-gradient(135deg, #00BFB4 0%, #00A3E0 50%, #0057FF 100%); --acento: #00BFB4; }
.tema-metas .hero-tec { border-radius: 28px;
  background: radial-gradient(circle at 82% 50%, rgba(0, 212, 200, .42), transparent 34%), linear-gradient(120deg, #051A33 0%, #0A1F44 45%, #064A5E 100%); }
.tema-metas .hero-tec::before { opacity: 1; mask-image: none; -webkit-mask-image: none;
  background: repeating-radial-gradient(circle at 84% 50%, transparent 0 34px, rgba(127, 240, 230, .10) 34px 35px); }
.tema-metas .hero-tec::after { top: 0; bottom: 0; left: 0; right: auto; width: 6px; height: auto; }
.tema-metas .txt-grad { background: linear-gradient(90deg, #00D4C8, #7FF0E6 60%, #5FA8FF); -webkit-background-clip: text; background-clip: text; }
.tema-metas .chip-vivo { color: #9FF3EC; border-color: rgba(0, 212, 200, .35); }
.tema-metas .hero-tec-nexo.pulgar img { box-shadow: 0 0 0 6px rgba(0, 212, 200, .18), 0 0 50px rgba(0, 212, 200, .45); }
.tema-metas .seccion-tec i { color: var(--acento); }
.tema-metas .acceso-card .entrar { color: #0090A8; }
.tema-metas .soltar { border-color: #9FE3DD; background: #F3FCFB; }
.tema-metas .soltar:hover, .tema-metas .soltar.encima { background: #E3F8F6; border-color: var(--acento); }
.tema-metas .soltar > i { color: var(--acento); }
.tema-metas .zona { border-radius: 18px; }
.tema-metas .resultado-cab { background: linear-gradient(135deg, #E6FBF9, #EEF4FF); border-color: #CDEFEA; }
/* AutoZip: azul eléctrico con hexágonos */
.tema-zip .hero-tec { background: radial-gradient(circle at 80% 50%, rgba(31, 123, 255, .5), transparent 36%), linear-gradient(110deg, #06142B 0%, #0A1F44 50%, #0B3A8A 100%); }
.tema-zip .hero-tec::before { opacity: 1; mask-image: linear-gradient(90deg, transparent 30%, #000 75%); -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 75%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66 0 50V18L28 2l28 16v32zm0 32L0 82' fill='none' stroke='%237FB6FF' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E"); }
.tema-zip .txt-grad { background: linear-gradient(90deg, #7FB6FF, #00D4C8); -webkit-background-clip: text; background-clip: text; }
/* Barra de navegación interna de cada aplicación (como la barra superior de sus programas) */
.nav-app { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px; margin-bottom: 22px; border-radius: 40px; width: fit-content; max-width: 100%;
  background: linear-gradient(90deg, #06182F 0%, #0A1F44 55%, #0A3550 100%); box-shadow: 0 6px 24px rgba(6, 24, 47, .2); }
.nav-app button { border: 0; background: transparent; font: inherit; cursor: pointer; }
.nav-app a, .nav-app button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 30px; color: #CFE0F5; font-weight: 600; font-size: 14px; white-space: nowrap; }
.nav-app a:hover, .nav-app button:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.nav-app a.activo, .nav-app button.activo { background: rgba(0, 212, 200, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(0, 212, 200, .55), 0 0 18px rgba(0, 212, 200, .25); }
.nav-app .activo i { color: #5FF2E5; }
.nav-app i { font-size: 17px; }

@media (max-width: 860px) {
  .contenido { padding: 0 16px 40px; }
  .hero-tec { flex-direction: column-reverse; text-align: center; padding: 28px 20px; }
  .hero-tec-acc { justify-content: center; }
  .hero-tec-nexo { margin: 0; width: 150px; height: 150px; }
  .hero-tec h1 { font-size: 28px; }
  .det-grid { grid-template-columns: 1fr; }
  .etapas { grid-template-columns: 1fr 1fr; }
  .etapas li + li::before { display: none; }
  .grilla-modulos, .accesos { grid-template-columns: 1fr; }
}
@media print {
  .contenido { background: #fff; }
  .hero-tec, .nav-app { display: none; }
  th { background: #fff; color: #000; border-bottom: 1px solid #999; }
}

/* ---------- Filtros en tarjeta y filas que se abren con clic (Soporte) ---------- */
.filtros-caja { background: var(--tarjeta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px 18px; margin-bottom: 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.filtros-caja label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--marino-2); margin: 0; }
.filtros-caja label.check { flex-direction: row; align-items: center; padding-bottom: 10px; }
.filtros-caja .acciones { grid-column: span 2; flex-wrap: nowrap; }
tr.fila-click { cursor: pointer; }
tr.fila-click:hover td { background: #EAF2FF; }
.codigo a { color: inherit; }
.estrellas-sel { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; border: 0; padding: 0; margin: 4px 0 12px; }
.estrellas-sel input { display: none; }
.estrellas-sel label { cursor: pointer; font-size: 30px; color: #CBD5E4; margin: 0; }
.estrellas-sel input:checked ~ label, .estrellas-sel label:hover, .estrellas-sel label:hover ~ label { color: #F5B400; }
.estrellas-on { color: #F5B400; }
.form label.subir, .form label.archivo { flex-direction: row; align-items: center; color: var(--azul); margin-bottom: 0; }
.form label.archivo { color: var(--texto); margin-top: 12px; }
.form label.prio-op { margin-bottom: 0; }