/* DELTIA APP · estilos. Estructura heredada del tablero de Kaktus, paleta de la identidad Deltia v2. */
:root {
  --ink:#0B1220; --blue:#2E62E8; --blue-osc:#2248AA; --blue-claro:#E8EEFC; --violet:#6A54E8;
  --bg:#F4F6FB; --panel:#FFFFFF; --panel-2:#F4F6FB; --borde:#DDE3EF; --borde-2:#EEF1F8;
  --texto:#0B1220; --texto-suave:#5A6478; --texto-3:#8B93A7;
  --rojo:#D6455C; --rojo-claro:#FBE9EC; --naranja:#E07A1F; --naranja-claro:#FDF0E3;
  --amarillo:#FFF6DB; --amarillo-borde:#F4DE9A; --amarillo-texto:#8A6100;
  --verde:#1F9D6A; --verde-claro:#E3F5EC;
  --sombra:0 2px 10px rgba(11,18,32,.08); --sombra-2:0 12px 40px rgba(11,18,32,.28);
  --titulo:'Saira Condensed','Bahnschrift','Arial Narrow',sans-serif;
  --texto-font:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',Consolas,monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#080D18; --panel:#0E1526; --panel-2:#161F35; --borde:#1E2942; --borde-2:#1A2338;
    --texto:#EEF2FB; --texto-suave:#9AA5BD; --texto-3:#6E7997; --blue:#6D95FF; --blue-claro:#182650;
    --rojo-claro:#3A1A22; --naranja-claro:#3A2A14; --amarillo:#33290F; --amarillo-borde:#5A4A1A; --amarillo-texto:#F1D27A;
    --verde-claro:#12301F; --sombra:0 2px 10px rgba(0,0,0,.4);
  }
}
* { box-sizing:border-box; margin:0; padding:0 }
html { -webkit-text-size-adjust:100% }
body { font-family:var(--texto-font); background:var(--bg); color:var(--texto); font-size:14px; line-height:1.45 }
h1,h2,h3,h4 { font-family:var(--titulo); letter-spacing:.02em }
button, input, select, textarea { font-family:inherit; color:inherit }
a { color:var(--blue) }
[hidden] { display:none !important }

/* ---- cabecera ---- */
header { background:var(--ink); color:#fff; padding:0 16px; display:flex; align-items:center; gap:16px; height:54px; position:sticky; top:0; z-index:50 }
header .logo { height:26px; width:auto; display:block }
header .spacer { flex:1 }
header .quien { text-align:right; line-height:1.2; font-size:12.5px }
header .quien b { display:block; font-size:13px }
header .quien span { color:#9AA5BD; font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-family:var(--mono) }
.btn-cab { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3); padding:6px 12px; border-radius:6px; font-size:12.5px; cursor:pointer; white-space:nowrap }
.btn-cab:hover { background:rgba(255,255,255,.2) }

nav#navegacion { background:var(--panel); border-bottom:2px solid var(--borde); display:flex; overflow-x:auto; position:sticky; top:54px; z-index:40 }
nav#navegacion button { border:none; background:none; padding:12px 18px; font-size:13.5px; font-weight:600; color:var(--texto-suave); cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap; margin-bottom:-2px }
nav#navegacion button:hover { color:var(--blue); background:var(--blue-claro) }
nav#navegacion button.activa { color:var(--blue); border-bottom-color:var(--blue) }
.badge { background:var(--rojo); color:#fff; border-radius:10px; padding:1px 7px; font-size:11px; margin-left:5px; font-family:var(--mono) }

main { padding:16px; max-width:1500px; margin:0 auto }
.pestania { display:none } .pestania.activa { display:block }

.panel { background:var(--panel); border:1px solid var(--borde); border-radius:10px; padding:14px 16px; margin-bottom:14px }
.panel h2 { font-size:22px; font-weight:600; margin-bottom:8px; color:var(--texto); text-transform:uppercase }
.panel h3 { font-size:15px; margin:10px 0 6px }
.intro { font-size:12.5px; color:var(--texto-suave); margin:-4px 0 12px; max-width:90ch }

input[type=text], input[type=email], input[type=password], input[type=date], input[type=tel], select, textarea {
  border:1.5px solid var(--borde); border-radius:7px; padding:8px 10px; font-size:13px; background:var(--panel); width:100% }
input:focus, textarea:focus, select:focus { outline:2px solid var(--blue-claro); border-color:var(--blue) }
textarea { resize:vertical; min-height:70px }
label.campo { font-size:12.5px; color:var(--texto-suave); display:block }
label.campo > * { margin-top:4px }
label.chk { display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; padding-bottom:7px }
.btn { background:var(--blue); color:#fff; border:none; padding:9px 16px; border-radius:7px; font-weight:600; cursor:pointer; font-size:13px; white-space:nowrap }
.btn:hover { background:var(--blue-osc) }
.btn:disabled { opacity:.5; cursor:default }
.btn.sec { background:var(--panel); color:var(--texto); border:1.5px solid var(--borde) }
.btn.sec:hover { background:var(--panel-2) }
.btn.chico { padding:4px 9px; font-size:12px }
.btn.rojo { background:var(--rojo) }
.btn.link { background:none; border:0; color:var(--rojo); padding:0; font-weight:500 }

.fila-info { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:10px; align-items:center }
.fila-info label.campo { width:auto }
.fila-info label.campo input, .fila-info label.campo select { width:auto }
.kpi { background:var(--panel-2); border-radius:8px; padding:8px 14px; min-width:84px }
.kpi b { display:block; font-size:20px; color:var(--texto); font-family:var(--titulo) }
.kpi span { font-size:10.5px; color:var(--texto-suave); text-transform:uppercase; letter-spacing:.06em; font-family:var(--mono) }

/* vistas */
.tb-vistas { display:flex; border:1px solid var(--borde); border-radius:8px; overflow:hidden }
.tb-vistas button { border:0; background:var(--panel); padding:7px 13px; font-size:13px; cursor:pointer; border-right:1px solid var(--borde); color:var(--texto-suave); white-space:nowrap }
.tb-vistas button:last-child { border-right:0 }
.tb-vistas button.activa { background:var(--blue); color:#fff; font-weight:600 }
.tb-kanban { display:flex; gap:12px; overflow-x:auto; padding:4px 2px 12px; align-items:flex-start }
.tb-col { flex:0 0 265px; background:var(--panel-2); border-radius:10px; padding:8px; min-height:90px }
.tb-col.drop { outline:2px dashed var(--blue); outline-offset:-3px }
.tb-col h4 { margin:2px 4px 8px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-suave); display:flex; justify-content:space-between; align-items:center; font-weight:600 }
.tb-col h4 .n { background:var(--panel); border-radius:10px; padding:1px 8px; font-size:12px; color:var(--texto); font-family:var(--mono) }
.tb-tar { background:var(--panel); border:1px solid var(--borde); border-left:3px solid var(--borde); border-radius:8px; padding:9px 10px; margin-bottom:8px; cursor:pointer; font-size:13px }
.tb-tar:hover { box-shadow:var(--sombra) }
.tb-tar.arrastrando { opacity:.4 }
.tb-tar.u-urgente, .tb-tar.u-critica { border-left-color:var(--rojo) } .tb-tar.u-alta { border-left-color:var(--naranja) }
.tb-tar.u-normal, .tb-tar.u-media { border-left-color:var(--blue) } .tb-tar.u-baja { border-left-color:#b9c0c7 }
.tb-tit { font-weight:600; line-height:1.35; margin-bottom:5px; word-break:break-word }
.tb-meta { display:flex; flex-wrap:wrap; gap:5px; align-items:center; font-size:11.5px; color:var(--texto-suave) }
.tb-chip { border-radius:20px; padding:1px 8px; background:var(--panel-2); border:1px solid var(--borde); white-space:nowrap }
.tb-chip.vencida { background:var(--rojo-claro); border-color:var(--rojo); color:var(--rojo); font-weight:600 }
.tb-chip.hoy { background:var(--amarillo); border-color:var(--amarillo-borde); color:var(--amarillo-texto); font-weight:600 }
.tb-chip.quien { background:var(--blue-claro); border-color:var(--blue); color:var(--blue) }
.tb-chip.origen { background:var(--panel-2); color:var(--texto-suave) }
.tb-chip.ok { background:var(--verde-claro); border-color:var(--verde); color:var(--verde) }
.tb-chip.ia { background:#EFEBFF; border-color:var(--violet); color:var(--violet) }
.tb-vacio { color:var(--texto-3); font-size:12.5px; padding:14px 6px; text-align:center }
.tb-vacio img { display:block; margin:0 auto 6px; width:88px; height:auto; opacity:.95 }
.tb-vacio.grande { padding:34px 6px } .tb-vacio.grande img { width:150px; margin-bottom:12px }
.tb-vacio.grande span { font-size:14px; color:var(--texto-suave) }
.tb-dia { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)) }
.tb-bloque h3 { font-size:16px; margin:0 0 8px; display:flex; align-items:center; gap:7px }
.tb-bloque.alerta h3 { color:var(--rojo) }

table.tabla { width:100%; border-collapse:collapse; font-size:13px }
.tabla thead th { background:var(--panel-2); text-align:left; padding:8px 9px; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-suave); border-bottom:2px solid var(--borde); white-space:nowrap; font-family:var(--mono); font-weight:500 }
.tabla tbody td { padding:7px 9px; border-bottom:1px solid var(--borde-2); vertical-align:top }
.tabla tbody tr:hover { background:var(--blue-claro) }
.tabla-scroll { overflow-x:auto }

.registro-linea { display:flex; gap:8px; padding:5px 2px; border-bottom:1px solid var(--borde-2); font-size:12.5px }
.registro-dia { font-weight:700; color:var(--blue); font-size:12px; letter-spacing:.06em; margin:12px 0 3px; font-family:var(--mono) }

/* ---- diálogo ---- */
.velo { position:fixed; inset:0; background:rgba(11,18,32,.55); z-index:1000; display:flex; align-items:flex-start; justify-content:center; padding:24px 12px; overflow:auto }
.dlg { background:var(--panel); border-radius:12px; padding:18px 20px; width:640px; max-width:100%; box-shadow:var(--sombra-2); margin:auto 0 }
.dlg h3 { font-size:20px; margin:0 0 14px; text-transform:uppercase; display:flex; align-items:center; gap:8px }
.dlg h3 .id { font-family:var(--mono); font-size:12px; color:var(--texto-3); letter-spacing:.06em; font-weight:400 }
.dlg .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.dlg .grid2 .ancho { grid-column:1/-1 }
.dlg .acciones { margin-top:16px; display:flex; gap:8px; justify-content:flex-end; align-items:center; flex-wrap:wrap }
.plazos { display:flex; flex-wrap:wrap; gap:5px; margin-top:4px }
.sigbox { margin-top:5px; border:1px solid var(--borde); border-radius:8px; padding:7px 9px; max-height:126px; overflow:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:3px }
.sigbox label { display:flex; align-items:center; gap:5px; font-size:12.5px; cursor:pointer }
.privada { display:flex; align-items:center; gap:7px; margin-top:11px; font-size:13px; background:var(--amarillo); border:1px solid var(--amarillo-borde); border-radius:8px; padding:8px 10px; cursor:pointer }
.nota { font-size:12px; color:var(--amarillo-texto); margin-top:5px }
.seccion { margin-top:14px; padding-top:12px; border-top:1px solid var(--borde) }
.seccion h4 { font-size:14px; margin-bottom:8px; display:flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:.06em; color:var(--texto-suave) }
.adjuntos { display:flex; flex-wrap:wrap; gap:8px }
.adj { position:relative; width:96px; height:96px; border:1px solid var(--borde); border-radius:8px; overflow:hidden; background:var(--panel-2); cursor:pointer }
.adj img { width:100%; height:100%; object-fit:cover; display:block }
.adj .pdf { display:grid; place-items:center; height:100%; font-size:11px; color:var(--texto-suave); text-align:center; padding:6px; word-break:break-all }
.adj .x { position:absolute; top:3px; right:3px; background:rgba(11,18,32,.7); color:#fff; border:0; border-radius:50%; width:20px; height:20px; font-size:12px; cursor:pointer; line-height:20px; text-align:center }
.adj.subiendo { opacity:.5 }
.adj-add { width:96px; height:96px; border:2px dashed var(--borde); border-radius:8px; display:grid; place-items:center; color:var(--texto-suave); font-size:12px; cursor:pointer; text-align:center }
.adj-add:hover { border-color:var(--blue); color:var(--blue) }
.comentarios { display:flex; flex-direction:column; gap:6px; max-height:300px; overflow:auto }
.com { font-size:13px; padding:7px 10px; border-radius:8px; background:var(--panel-2) }
.com b { font-size:12.5px }
.com .f { font-size:11px; color:var(--texto-3); font-family:var(--mono); margin-left:6px }
.com.sis { background:none; padding:2px 10px; font-size:12px; color:var(--texto-suave) }
.com p { white-space:pre-wrap; margin-top:2px }
.com-nuevo { display:flex; gap:8px; margin-top:8px; align-items:flex-end }
.com-nuevo textarea { min-height:40px; flex:1 }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:2000; display:grid; place-items:center; cursor:zoom-out; padding:20px }
.lightbox img { max-width:100%; max-height:100%; object-fit:contain }

#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:11px 22px; border-radius:8px; font-size:13.5px; display:none; z-index:10300; box-shadow:var(--sombra-2); max-width:92vw; text-align:center }

/* ---- pantalla de ingreso / no autorizado ---- */
/* Pantalla de ingreso. El render 3D del símbolo (Higgsfield) va como cabecera de la caja, con máscara
   radial para fundirse en Delta Ink; así nunca se pisa con el logo ni el formulario, sea cual sea la pantalla. */
#pantalla { position:fixed; inset:0; background:#0B1220; color:#fff; z-index:5000; display:none; align-items:center; justify-content:center; padding:16px; overflow:auto }
#pantalla.abierto { display:flex }
#pantalla .caja { width:460px; max-width:100%; text-align:center; margin:auto }
#pantalla .caja::before { content:''; display:block; height:230px; margin:0 auto 2px; background:url('/icons/hero.jpg') center 45% / cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 62% 78% at 50% 48%, #000 35%, transparent 100%); mask-image:radial-gradient(ellipse 62% 78% at 50% 48%, #000 35%, transparent 100%) }
#pantalla .caja img { height:40px; width:auto; margin-bottom:18px }
@media (max-width:767px) { #pantalla .caja::before { height:180px } }
#pantalla h2 { font-size:26px; text-transform:uppercase; margin-bottom:8px }
#pantalla p { color:#9AA5BD; font-size:14px; margin-bottom:18px }
#pantalla select, #pantalla input { background:#0E1526; color:#fff; border-color:#1E2942; margin-bottom:12px }
#pantalla input:focus { outline:2px solid #2248AA; border-color:#6D95FF }
#pantalla form .btn { margin-top:4px }
#pantalla .btn { width:100% }
#pantalla code { font-family:var(--mono); color:#EEF2FB; background:#0E1526; padding:2px 6px; border-radius:4px }

/* ---- aplicaciones (solo PC) ---- */
.apps { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:6px }
.app { background:var(--panel-2); border:1px solid var(--borde); border-radius:10px; padding:18px; display:flex; flex-direction:column; gap:8px }
.app-ico { font-size:34px; line-height:1 }
.app h3 { font-size:19px; margin:2px 0 0; text-transform:uppercase }
.app p { font-size:13.5px; color:var(--texto-suave); flex:1 }
.app .btn { text-decoration:none; text-align:center }
.app-nota { font-size:12px; color:var(--texto-3); line-height:1.4 }

/* ---- usuarios (admin) ---- */
.usr-form { display:grid; grid-template-columns:2fr 2fr 1fr 1.2fr auto; gap:8px; align-items:end }
.usr-form .btn { height:36px }
.rol { font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; border-radius:4px; padding:2px 6px; background:var(--panel-2); border:1px solid var(--borde) }
.rol.admin { background:var(--blue-claro); color:var(--blue); border-color:var(--blue) }
tr.inactivo td { opacity:.5 }

/* ---- celular ---- */
#navMovil { display:none }
@media (max-width:767px) {
  nav#navegacion { display:none }
  main { padding:10px 10px 74px }
  .panel { padding:11px 12px; margin-bottom:11px }
  .panel h2 { font-size:19px }
  .fila-info { gap:8px }
  .intro { display:none }   /* en el celular el espacio es para las tarjetas */
  .fila-info label.campo { flex:1 1 45% }
  .fila-info label.campo input, .fila-info label.campo select { width:100% !important }
  .kpi { padding:6px 10px; flex:1 1 60px; text-align:center; min-width:0 }
  .kpi b { font-size:17px }
  .btn { padding:11px 15px; font-size:14.5px }
  .btn.chico { padding:9px 12px; font-size:13.5px }
  input, select, textarea { font-size:16px }
  .tb-col { flex-basis:82vw }
  .dlg { padding:14px; width:100% }
  .dlg .grid2 { grid-template-columns:1fr }
  .velo { padding:8px }
  header .quien span { display:none }
  .usr-form { grid-template-columns:1fr 1fr }
  #navMovil { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--panel); border-top:1px solid var(--borde);
    padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -2px 12px rgba(0,0,0,.08) }
  #navMovil button { flex:1; min-width:0; border:none; background:none; padding:7px 2px 6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px;
    font-size:10.5px; font-weight:700; color:var(--texto-suave); position:relative; font-family:var(--mono); text-transform:uppercase; letter-spacing:.04em }
  #navMovil button .ic { font-size:20px; line-height:1 }
  #navMovil button.activa { color:var(--blue) }
  #navMovil .mb-badge { position:absolute; top:3px; right:calc(50% - 22px); background:var(--rojo); color:#fff; border-radius:9px; font-size:10px; padding:0 5px; font-weight:700 }
}