/* ─────────────────────────────────────────────────────────────────────────
   Plataforma 360 · estilos del panel
   El color de la marca llega como variable --c desde Ajustes.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --c:#E04B4B; --c-suave:color-mix(in srgb,var(--c) 10%,#fff); --c-oscuro:color-mix(in srgb,var(--c) 75%,#000);
  --tinta:#1a1d23; --texto:#3b414b; --suave:#6b7280; --linea:#e5e7eb; --fondo:#f6f7f9; --papel:#fff;
  --ok:#1f8a4c; --ok-suave:#e8f5ee; --error:#b42318; --error-suave:#fdecea; --aviso:#9a6700; --aviso-suave:#fff6db;
  --radio:10px; --sombra:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:14.5px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--c-oscuro)}
h1{font-size:24px;line-height:1.25;margin:0}
h2{font-size:17px;margin:0 0 12px}
h3{font-size:15px;margin:0 0 8px}
p{margin:0 0 10px}
small,.suave{color:var(--suave)}
code{background:#f1f2f4;padding:1px 5px;border-radius:4px;font-size:.92em}

/* ── estructura ── */
.barra{background:var(--papel);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:20}
.barra .dentro{max-width:1240px;margin:0 auto;display:flex;align-items:center;gap:22px;padding:0 20px;height:58px}
.marca{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--tinta);text-decoration:none;white-space:nowrap}
.marca img{height:26px;max-width:140px;object-fit:contain}
.marca .punto{width:12px;height:12px;border-radius:3px;background:var(--c)}
.nav{display:flex;gap:4px;flex:1;overflow-x:auto}
.nav a{padding:8px 12px;border-radius:7px;color:var(--texto);text-decoration:none;font-weight:500;white-space:nowrap}
.nav a:hover{background:var(--fondo)}
.nav a.activo{background:var(--c-suave);color:var(--c-oscuro)}
.usuario{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--suave);white-space:nowrap}
.usuario form{margin:0}
.principal{max-width:1240px;margin:0 auto;padding:26px 20px 60px}
.cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.cabecera .sub{color:var(--suave);margin-top:4px}
.migas{font-size:13px;color:var(--suave);margin-bottom:6px}
.migas a{color:var(--suave);text-decoration:none}
.migas a:hover{text-decoration:underline}
.pie{max-width:1240px;margin:0 auto;padding:0 20px 30px;color:#9aa1ab;font-size:12px}

/* ── tarjetas ── */
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra);padding:20px 22px;margin-bottom:18px}
.tarjeta.sin{padding:0;overflow:hidden}
.tarjeta .titulo{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.tarjeta .titulo h2{margin:0}
.rejilla{display:grid;gap:18px}
.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r4{grid-template-columns:repeat(4,minmax(0,1fr))}
.r-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media(max-width:900px){.r2,.r3,.r4,.r-2-1{grid-template-columns:1fr}}

.kpi{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:16px 18px;box-shadow:var(--sombra);position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;left:0;top:0;right:0;height:3px;background:var(--acento,var(--c))}
.kpi .et{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--suave);text-transform:uppercase}
.kpi .val{font-size:30px;font-weight:700;line-height:1.2;margin-top:6px;color:var(--tinta)}
.kpi .det{font-size:13px;color:var(--suave)}

/* ── botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--linea);background:var(--papel);color:var(--tinta);
     padding:8px 14px;border-radius:8px;font-family:inherit;font-weight:600;font-size:13.5px;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:#f3f4f6}
.btn.pri{background:var(--c);border-color:var(--c);color:#fff}
.btn.pri:hover{background:var(--c-oscuro)}
.btn.peligro{color:var(--error);border-color:#f3c3be}
.btn.peligro:hover{background:var(--error-suave)}
.btn.chico{padding:5px 10px;font-size:12.5px}
.btn.enlace{border:0;background:none;padding:4px 6px;color:var(--c-oscuro)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
form.linea{display:inline}

/* ── formularios ── */
label{display:block;font-weight:600;font-size:13.5px;margin:0 0 5px}
.campo{margin-bottom:16px}
.campo .ayuda{font-size:12.5px;color:var(--suave);margin-top:4px;font-weight:400}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=search],select,textarea{
  width:100%;padding:9px 11px;border:1px solid #d0d5dd;border-radius:8px;font-family:inherit;font-size:14px;line-height:1.4;color:var(--tinta);background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid color-mix(in srgb,var(--c) 35%,transparent);border-color:var(--c)}
textarea{min-height:90px;resize:vertical}
input[type=color]{width:46px;height:36px;padding:2px;border:1px solid #d0d5dd;border-radius:8px;background:#fff}
.check{display:flex;gap:9px;align-items:flex-start;font-weight:500}
.check input{margin-top:3px}
fieldset{border:1px solid var(--linea);border-radius:var(--radio);padding:14px 16px;margin:0 0 16px}
legend{font-weight:700;padding:0 6px;font-size:13px;color:var(--suave);text-transform:uppercase;letter-spacing:.05em}
details.avanzado summary{cursor:pointer;font-weight:600;color:var(--c-oscuro);margin:6px 0 12px}

/* ── avisos ── */
.flash{padding:11px 14px;border-radius:8px;margin-bottom:12px;border:1px solid;font-size:14px;word-break:break-word}
.flash.ok{background:var(--ok-suave);border-color:#b7e1c7;color:#14532d}
.flash.error{background:var(--error-suave);border-color:#f5c2bc;color:#7a1a12}
.flash.aviso{background:var(--aviso-suave);border-color:#f2d98c;color:#6b4a00}
.flash.enlace{background:#eef4ff;border-color:#c7d7fe;color:#1e3a8a}
.nota{background:#f8fafc;border-left:3px solid var(--c);padding:10px 14px;border-radius:0 8px 8px 0;color:var(--texto);font-size:13.5px}

/* ── tablas ── */
.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--suave);font-weight:700;
          padding:10px 14px;border-bottom:1px solid var(--linea);background:#fafbfc;white-space:nowrap}
.tabla td{padding:11px 14px;border-bottom:1px solid #f0f1f3;vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla tr.fila-link{cursor:pointer}
.tabla tr.fila-link:hover td{background:#fafbfc}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}
.tabla .centro{text-align:center}
.desborde{overflow-x:auto}

/* ── etiquetas ── */
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.chip.borrador{background:#f1f2f4;color:#4b5563}
.chip.abierta{background:#e8f1ff;color:#1d4ed8}
.chip.cerrada{background:var(--ok-suave);color:var(--ok)}
.chip.demo{background:#fdf2fa;color:#9d174d}
.chip.pendiente{background:#f1f2f4;color:#4b5563}
.chip.empezado{background:var(--aviso-suave);color:var(--aviso)}
.chip.completado{background:var(--ok-suave);color:var(--ok)}
.chip.retenido{background:#f1f2f4;color:#4b5563}
.chip.enviado{background:var(--ok-suave);color:var(--ok)}
.chip.error{background:var(--error-suave);color:var(--error)}

.progreso{height:7px;background:#eef0f3;border-radius:99px;overflow:hidden;min-width:90px}
.progreso i{display:block;height:100%;background:var(--c);border-radius:99px}

.vacio{text-align:center;padding:46px 20px;color:var(--suave)}
.vacio h3{color:var(--tinta)}

.filtros{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filtros a{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--texto);border:1px solid var(--linea);background:#fff;font-size:13px}
.filtros a.activo{background:var(--tinta);border-color:var(--tinta);color:#fff}
.filtros form{margin-left:auto;display:flex;gap:6px}
.filtros input{width:220px}

/* ── resultados ── */
.barra-h{display:flex;align-items:center;gap:10px}
.barra-h .b{flex:1;height:10px;background:#eef0f3;border-radius:99px;overflow:hidden}
.barra-h .b i{display:block;height:100%;border-radius:99px}
.barra-h .v{width:34px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.dif-pos{color:var(--c-oscuro);font-weight:700}
.dif-neg{color:var(--ok);font-weight:700}
.dif-0{color:var(--suave);font-weight:700}
.alto{background:#e9f6ee}
.bajo{background:#fdecea}
.literal{font-style:italic;color:var(--texto);margin:0 0 6px;padding-left:12px;border-left:2px solid var(--linea)}

/* ── autenticación ── */
.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px 16px;
      background:radial-gradient(1200px 500px at 50% -10%,var(--c-suave),transparent),var(--fondo)}
.auth .caja{width:100%;max-width:410px}
.auth .tarjeta{padding:28px 28px 24px}
.auth .logo{text-align:center;margin-bottom:18px}
.auth .logo img{max-height:52px;max-width:220px}
.auth h1{font-size:21px;margin-bottom:6px}
.auth .btn{width:100%;padding:11px}
.separador{display:flex;align-items:center;gap:10px;color:var(--suave);font-size:12px;margin:14px 0}
.separador:before,.separador:after{content:"";flex:1;height:1px;background:var(--linea)}

/* ── editor de modelos ── */
.comp{border:1px solid var(--linea);border-radius:var(--radio);margin-bottom:14px;background:#fff}
.comp .cab{display:flex;gap:10px;align-items:center;padding:12px 14px;background:#fafbfc;border-bottom:1px solid var(--linea);border-radius:var(--radio) var(--radio) 0 0}
.comp .cab input{font-weight:700}
.comp .num{font-weight:700;color:var(--suave);min-width:24px}
.item{display:grid;grid-template-columns:28px minmax(0,1fr) minmax(0,1fr) auto;gap:10px;padding:10px 14px;border-bottom:1px solid #f1f2f4;align-items:start}
.item:last-child{border-bottom:0}
.item .n{color:var(--suave);font-size:12px;padding-top:9px;text-align:right}
.item textarea{min-height:58px;font-size:13.5px}
.item .tr{grid-column:2 / 4;display:none;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.con-tr .item .tr{display:grid}
.item .tr textarea{min-height:48px;font-size:13px;background:#fcfcfd}
.item .tr .idi{font-size:11px;font-weight:700;color:var(--suave);text-transform:uppercase;margin-bottom:2px}
.comp .tr-c{display:none;gap:8px;padding:8px 14px;background:#fcfcfd;border-bottom:1px solid var(--linea)}
.con-tr .comp .tr-c{display:flex}
.herr{display:flex;gap:4px;flex-direction:column}
@media(max-width:800px){.item{grid-template-columns:1fr}.item .n{display:none}.item .tr{grid-column:1}}
.pegajoso{position:sticky;bottom:0;background:rgba(246,247,249,.94);backdrop-filter:blur(4px);padding:12px 0;border-top:1px solid var(--linea);margin-top:10px;z-index:5}

/* ── ventana de confirmación propia (dialogo.js) ── */
.p360-fondo{position:fixed;inset:0;background:rgba(17,24,39,.45);display:flex;align-items:center;justify-content:center;padding:18px;z-index:1000}
.p360-caja{background:#fff;border-radius:12px;max-width:440px;width:100%;padding:22px 22px 18px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.p360-caja p{margin:0 0 18px;font-size:15px;line-height:1.5;color:var(--tinta)}
.p360-acc{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.p360-acc button{font-family:inherit;font-size:14px;font-weight:600;padding:9px 16px;border-radius:8px;cursor:pointer;border:1px solid var(--linea);background:#fff;color:var(--tinta)}
.p360-acc .p360-si{background:var(--c);border-color:var(--c);color:#fff}