:root{
  --azul:#1f3864; --azul-claro:#2f5597; --azul-suave:#eef2f9;
  --gris-borde:#d7dce5; --gris-texto:#5a6475; --texto:#1b2230;
  --fondo:#f4f6fa; --blanco:#fff;
  --ok:#0f7b3f; --ok-bg:#e8f6ee; --err:#b3261e; --err-bg:#fdecea;
  --amarillo:#fff8dd;
  --radio:8px;
  --fuente:"Segoe UI",Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--fuente);background:var(--fondo);color:var(--texto);font-size:14px;line-height:1.5}
.oculto{display:none !important}
h1,h2,h3{margin:0;font-weight:600}
a{color:var(--azul-claro)}

/* ---------------- login ---------------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1f3864,#2f5597);padding:24px}
.login-card{background:var(--blanco);padding:36px 32px;border-radius:12px;width:100%;max-width:380px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.login-marca{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--azul-claro);font-weight:700}
.login-card h1{font-size:20px;margin:8px 0 2px}
.login-sub{margin:0 0 22px;color:var(--gris-texto);font-size:12.5px}
.login-card label{display:block;margin-bottom:14px;font-size:12.5px;font-weight:600;color:var(--gris-texto)}
.login-card input{width:100%;margin-top:5px;padding:10px 11px;border:1px solid var(--gris-borde);border-radius:var(--radio);font-size:14px;font-family:inherit}
.login-card input:focus{outline:2px solid var(--azul-claro);outline-offset:-1px;border-color:transparent}
.btn-primario.ancho{width:100%}
.paso-intro{font-size:13px;color:var(--gris-texto);margin:0 0 16px;line-height:1.5}
.paso-intro strong{color:var(--texto)}
.login-pie{margin:14px 0 0;text-align:center;font-size:12.5px}
.login-pie a{color:var(--azul-claro);text-decoration:none}
.login-pie a:hover{text-decoration:underline}
.login-nota{margin:12px 0 0;font-size:11.5px;color:var(--gris-texto);text-align:center;line-height:1.45}
.campo-codigo{text-align:center;font-size:26px !important;letter-spacing:.42em;font-family:Consolas,monospace;padding:12px 10px !important;text-indent:.42em}

/* mostrar / ocultar la contraseña */
.campo-clave{position:relative;display:block;width:100%}
.campo-clave input{padding-right:44px !important}
.ver-clave{position:absolute;right:4px;top:50%;transform:translateY(-50%);background:none;border:0;padding:6px;cursor:pointer;color:var(--gris-texto);border-radius:6px;display:flex;align-items:center;line-height:0}
.ver-clave:hover{color:var(--azul);background:var(--azul-suave)}
.ver-clave:focus-visible{outline:2px solid var(--azul-claro);outline-offset:-1px}
.ver-clave svg{width:19px;height:19px;display:block}
.login-card .campo-clave{margin-top:5px}
.login-card .campo-clave input{margin-top:0}
.aviso-simulado{background:var(--amarillo);border:1px solid #e0b93a;border-radius:var(--radio);padding:10px 12px;font-size:12px;margin-bottom:14px;line-height:1.45}
.aviso-simulado code{background:#fff;padding:1px 6px;border-radius:4px;font-size:15px;font-weight:700;letter-spacing:.1em}
.aviso-simulado a{word-break:break-all}

/* ---------------- barra ---------------- */
.barra{background:var(--azul);color:#fff;display:flex;align-items:center;gap:20px;padding:0 20px;height:56px;position:sticky;top:0;z-index:20;flex-wrap:wrap}
.barra-izq{display:flex;align-items:baseline;gap:10px;flex-shrink:0}
.marca{font-weight:700;letter-spacing:.04em}
.barra-titulo{font-size:12.5px;opacity:.75}
.tabs{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.tabs button{background:none;border:0;color:#cdd8ec;padding:8px 13px;border-radius:6px;cursor:pointer;font-size:13.5px;font-family:inherit}
.tabs button:hover{background:rgba(255,255,255,.1);color:#fff}
.tabs button.activo{background:#fff;color:var(--azul);font-weight:600}
.barra-der{display:flex;align-items:center;gap:12px;margin-left:16px}
.usuario-info{font-size:12.5px;opacity:.85;white-space:nowrap}
.barra .btn-lineal{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.barra .btn-lineal:hover{background:rgba(255,255,255,.14)}

main{max-width:1280px;margin:0 auto;padding:22px 20px 60px}

/* ---------------- botones ---------------- */
.btn-primario{background:var(--azul);color:#fff;border:0;padding:10px 20px;border-radius:var(--radio);font-size:14px;cursor:pointer;font-family:inherit;font-weight:600}
.btn-primario:hover{background:var(--azul-claro)}
.btn-primario:disabled{opacity:.55;cursor:default}
.btn-lineal{background:transparent;border:1px solid var(--gris-borde);color:var(--texto);padding:8px 15px;border-radius:var(--radio);cursor:pointer;font-size:13.5px;font-family:inherit;text-decoration:none;display:inline-block}
.btn-lineal:hover{background:var(--azul-suave);border-color:var(--azul-claro)}
.btn-mini{background:transparent;border:1px solid var(--gris-borde);border-radius:6px;padding:3px 9px;font-size:12px;cursor:pointer;font-family:inherit;margin-right:5px}
.btn-mini:hover{background:var(--azul-suave)}
.btn-mini.peligro{color:var(--err);border-color:#e9bdb9}
.btn-mini.peligro:hover{background:var(--err-bg)}

/* ---------------- paneles ---------------- */
.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.panel-head h2{font-size:19px}
.panel-head-acciones{display:flex;gap:8px}
.sutil{margin:3px 0 0;color:var(--gris-texto);font-size:12.5px}
.req-marca{color:var(--err);font-weight:700}

.alerta{padding:10px 13px;border-radius:var(--radio);margin-bottom:14px;font-size:13px}
.alerta.error{background:var(--err-bg);color:var(--err);border:1px solid #f0c4c0}
.alerta.ok{background:var(--ok-bg);color:var(--ok);border:1px solid #bde3cd}

/* ---------------- formulario ---------------- */
.banda{background:var(--blanco);border:1px solid var(--gris-borde);border-radius:10px;margin-bottom:14px;overflow:hidden}
.banda-head{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--azul-suave);border-bottom:1px solid var(--gris-borde);cursor:pointer;user-select:none}
.banda-head:hover{background:#e4ebf7}
.banda-nombre{font-weight:700;color:var(--azul);letter-spacing:.05em;font-size:13px}
.banda-desc{color:var(--gris-texto);font-size:12px;flex:1}
.banda-etiqueta{font-size:11px;padding:2px 8px;border-radius:99px;background:#fff;border:1px solid var(--gris-borde);color:var(--gris-texto);white-space:nowrap}
.banda-etiqueta.siempre{background:var(--azul);color:#fff;border-color:var(--azul)}
.banda-flecha{font-size:11px;color:var(--gris-texto);transition:transform .15s}
.banda.cerrada .banda-flecha{transform:rotate(-90deg)}
.banda.cerrada .banda-cuerpo{display:none}
.banda-cuerpo{padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px 18px}
.campo{display:flex;flex-direction:column}
.campo.ancho{grid-column:1/-1}
.campo label{font-size:12.5px;font-weight:600;margin-bottom:4px}
.campo input,.campo select,.campo textarea{padding:8px 10px;border:1px solid var(--gris-borde);border-radius:var(--radio);font-size:13.5px;font-family:inherit;background:#fff;width:100%}
.campo textarea{resize:vertical;min-height:58px}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--azul-claro);outline-offset:-1px;border-color:transparent}
.campo .ayuda{font-size:11.5px;color:var(--gris-texto);margin-top:4px}
.campo.invalido input,.campo.invalido select,.campo.invalido textarea{border-color:var(--err);background:#fffafa}
.acciones-form{display:flex;gap:10px;position:sticky;bottom:0;background:linear-gradient(to top,var(--fondo) 65%,transparent);padding:14px 0 6px}

/* ---------------- filtros ---------------- */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;background:var(--blanco);border:1px solid var(--gris-borde);border-radius:10px;padding:12px 14px}
.filtros label{font-size:12px;font-weight:600;color:var(--gris-texto);display:flex;flex-direction:column;gap:4px}
.filtros input,.filtros select{padding:7px 9px;border:1px solid var(--gris-borde);border-radius:6px;font-size:13px;font-family:inherit;min-width:160px}

/* ---------------- tabla ---------------- */
.tabla-scroll{overflow-x:auto;background:var(--blanco);border:1px solid var(--gris-borde);border-radius:10px}
.tabla{border-collapse:collapse;width:100%;font-size:13px}
.tabla th{background:var(--azul);color:#fff;text-align:left;padding:9px 11px;font-weight:600;white-space:nowrap;font-size:12px;position:sticky;top:0}
.tabla td{padding:8px 11px;border-top:1px solid #eceff5;vertical-align:top}
.tabla tbody tr:hover{background:var(--azul-suave)}
.tabla td.recorte{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip{display:inline-block;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;white-space:nowrap}
.chip.abierto,.chip.a-definir{background:#fdf0d5;color:#8a5b00}
.chip.en-tramite{background:#e3edfb;color:#1f3864}
.chip.en-mediacion,.chip.en-juicio{background:#f3e6fb;color:#5b2a86}
.chip.rechazado{background:var(--err-bg);color:var(--err)}
.chip.finalizado{background:var(--ok-bg);color:var(--ok)}
.vacio{padding:36px;text-align:center;color:var(--gris-texto);background:var(--blanco);border:1px dashed var(--gris-borde);border-radius:10px;margin-top:10px}

/* ---------------- usuarios ---------------- */
.form-usuario{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;align-items:end;background:var(--blanco);border:1px solid var(--gris-borde);border-radius:10px;padding:16px;margin-bottom:16px}
.form-usuario label{display:flex;flex-direction:column;font-size:12.5px;font-weight:600;gap:4px}
.form-usuario input,.form-usuario select{padding:8px 10px;border:1px solid var(--gris-borde);border-radius:var(--radio);font-size:13.5px;font-family:inherit}

/* ---------------- instructivo ---------------- */
.doc{background:var(--blanco);border:1px solid var(--gris-borde);border-radius:10px;padding:26px 30px;max-width:980px}
.doc h2{font-size:20px;color:var(--azul)}
.doc h3{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--azul-claro);margin:26px 0 8px}
.doc p{margin:0 0 10px}
.doc ol,.doc ul{margin:0 0 10px;padding-left:20px}
.doc li{margin-bottom:6px}
.doc .nota{background:var(--amarillo);border-left:3px solid #e0b93a;padding:10px 14px;border-radius:0 6px 6px 0;margin-bottom:14px}
.doc table{border-collapse:collapse;width:100%;font-size:12.5px;margin-top:8px}
.doc th{background:var(--azul-suave);text-align:left;padding:8px 10px;border:1px solid var(--gris-borde);font-size:12px}
.doc td{padding:7px 10px;border:1px solid #e9edf4;vertical-align:top}
.doc td.banda-col{font-weight:600;color:var(--azul);white-space:nowrap;font-size:11.5px}

/* ---------------- modal ---------------- */
.modal{position:fixed;inset:0;background:rgba(15,22,38,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal-caja{background:var(--blanco);border-radius:12px;width:100%;max-width:880px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--gris-borde)}
.modal-cuerpo{padding:18px 20px;overflow:auto}
.modal-pie{padding:13px 20px;border-top:1px solid var(--gris-borde);display:flex;gap:9px;justify-content:flex-end}
.btn-cerrar{background:none;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--gris-texto)}
.det-banda{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--azul-claro);font-weight:700;margin:16px 0 6px;border-bottom:1px solid var(--gris-borde);padding-bottom:4px}
.det-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px 20px}
.det-item .k{font-size:11.5px;color:var(--gris-texto)}
.det-item .v{font-size:13.5px}

@media(max-width:760px){
  .barra{height:auto;padding:10px 14px}
  .tabs{width:100%;margin-left:0}
  .barra-der{margin-left:0;width:100%;justify-content:space-between}
  main{padding:16px 12px 50px}
}