/* Paleta: tinta/pergamino, pensada para un sistema de expedientes legales.
   Fondo casi-negro azulado (#12161C), acento sello-vino (#7A2E2E), texto cálido. */
:root{
  --bg:#12161C;
  --bg-panel:#1B212B;
  --linea:#2A323F;
  --texto:#E7E3D8;
  --texto-tenue:#9AA3B2;
  --acento:#7A2E2E;
  --acento-claro:#B85C4A;
  --ok:#3E7A57;
  --alerta:#B8863E;
  --fuente: "IBM Plex Sans", -apple-system, Segoe UI, sans-serif;
  --fuente-mono: "IBM Plex Mono", ui-monospace, monospace;
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--texto);
  font-family:var(--fuente); min-height:100vh;
}

.sello{
  font-family:var(--fuente-mono); letter-spacing:.12em; text-transform:uppercase;
  font-size:.72rem; color:var(--texto-tenue);
}

/* ---------- Login ---------- */
.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(180deg, rgba(122,46,46,.08), transparent 40%),
    var(--bg);
}
.login-card{
  width:100%; max-width:380px; padding:2.5rem 2rem;
  background:var(--bg-panel); border:1px solid var(--linea); border-radius:2px;
  border-top:3px solid var(--acento);
}
.login-card h1{font-size:1.15rem; margin:.25rem 0 1.5rem; font-weight:600;}
label{display:block; font-size:.78rem; color:var(--texto-tenue); margin:1rem 0 .3rem;}
input[type=text], input[type=password]{
  width:100%; padding:.65rem .7rem; background:var(--bg); color:var(--texto);
  border:1px solid var(--linea); border-radius:2px; font-family:var(--fuente); font-size:.95rem;
}
input:focus{outline:2px solid var(--acento-claro); outline-offset:1px;}
button{
  cursor:pointer; border:none; border-radius:2px; font-family:var(--fuente); font-weight:600;
}
.btn-primario{
  width:100%; margin-top:1.5rem; padding:.75rem; background:var(--acento); color:#fff; font-size:.9rem;
}
.btn-primario:hover{background:var(--acento-claro);}
.error-msg{color:var(--alerta); font-size:.82rem; margin-top:.9rem; min-height:1.1em;}

/* ---------- Dashboard ---------- */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:.9rem 1.5rem; border-bottom:1px solid var(--linea); background:var(--bg-panel);
}
.topbar h1{font-size:1rem; margin:0; font-weight:600;}
.contenedor{padding:1.5rem;}
.tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.5rem;}
.tarjeta{background:var(--bg-panel); border:1px solid var(--linea); padding:1rem; border-radius:2px;}
.tarjeta .valor{font-size:1.6rem; font-family:var(--fuente-mono); font-weight:600;}
.tarjeta .etiqueta{font-size:.75rem; color:var(--texto-tenue); text-transform:uppercase; letter-spacing:.06em;}

.filtros{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem;}
.filtros input, .filtros select{
  padding:.5rem .6rem; background:var(--bg-panel); border:1px solid var(--linea); color:var(--texto); border-radius:2px;
}

table{width:100%; border-collapse:collapse; font-size:.87rem;}
thead th{
  text-align:left; padding:.6rem .7rem; color:var(--texto-tenue); font-weight:600;
  border-bottom:1px solid var(--linea); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;
}
tbody td{padding:.6rem .7rem; border-bottom:1px solid var(--linea);}
tbody tr:hover{background:rgba(255,255,255,.02);}
.badge{padding:.15rem .5rem; border-radius:2px; font-size:.72rem; font-family:var(--fuente-mono);}
.badge-finalizado{background:rgba(62,122,87,.2); color:#7FCB9C;}
.badge-pendiente{background:rgba(184,134,62,.2); color:#E0B96E;}
.badge-en_tramite{background:rgba(122,46,46,.2); color:var(--acento-claro);}
.badge-turnado, .badge-otro{background:rgba(154,163,178,.2); color:var(--texto-tenue);}

.btn-secundario{
  padding:.5rem .9rem; background:transparent; border:1px solid var(--linea); color:var(--texto); font-size:.82rem; border-radius:2px;
}
.btn-secundario:hover{border-color:var(--acento-claro);}

.modal-fondo{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); align-items:center; justify-content:center;
}
.modal-fondo.abierto{display:flex;}
.modal{
  width:100%; max-width:480px; background:var(--bg-panel); border:1px solid var(--linea); padding:1.5rem; border-radius:2px;
  max-height:90vh; overflow-y:auto;
}
.modal h2{margin-top:0; font-size:1.05rem;}
.form-grid{display:grid; gap:.9rem;}
.form-acciones{display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.2rem;}

/* ---------- Colores por tipo de documento ---------- */

/* Exhorto recibido: verde/teal sutil */
tr.tipo-exhorto_recibido td{
  background: rgba(40, 160, 130, 0.07);
}
tr.tipo-exhorto_recibido:hover td{ background: rgba(40, 160, 130, 0.13); }
tr.tipo-exhorto_recibido td:first-child{
  border-left: 3px solid rgba(40, 180, 140, 0.65);
}

/* Exhorto enviado: rosado sutil */
tr.tipo-exhorto_enviado td{
  background: rgba(200, 80, 120, 0.08);
}
tr.tipo-exhorto_enviado:hover td{ background: rgba(200, 80, 120, 0.14); }
tr.tipo-exhorto_enviado td:first-child{
  border-left: 3px solid rgba(220, 100, 140, 0.7);
}

/* Oficio: azul sutil */
tr.tipo-oficio td{
  background: rgba(60, 120, 200, 0.08);
}
tr.tipo-oficio:hover td{ background: rgba(60, 120, 200, 0.14); }
tr.tipo-oficio td:first-child{
  border-left: 3px solid rgba(80, 140, 220, 0.7);
}

/* Badges de tipo */
.badge-tipo{
  display:inline-block;
  padding:.12rem .45rem;
  border-radius:2px;
  font-size:.68rem;
  font-family:var(--fuente-mono);
  letter-spacing:.02em;
  white-space:nowrap;
}
.badge-tipo-expediente     { background:rgba(154,163,178,.15); color:var(--texto-tenue); }
.badge-tipo-exhorto_recibido{ background:rgba(40,180,140,.18);  color:#5DD6B0; }
.badge-tipo-exhorto_enviado { background:rgba(220,100,140,.18); color:#E87FA8; }
.badge-tipo-oficio          { background:rgba(80,140,220,.18);  color:#7AADEE; }

/* Leyenda de colores */
.leyenda{
  display:flex; gap:1rem; flex-wrap:wrap; align-items:center;
  margin-bottom:.8rem; font-size:.72rem; color:var(--texto-tenue);
}
.leyenda-item{ display:flex; align-items:center; gap:.35rem; }
.leyenda-color{
  width:10px; height:10px; border-radius:2px; flex-shrink:0;
}
.leyenda-color.expediente       { background:var(--linea); }
.leyenda-color.exhorto_recibido { background:rgba(40,180,140,0.6); }
.leyenda-color.exhorto_enviado  { background:rgba(220,100,140,0.6); }
.leyenda-color.oficio           { background:rgba(80,140,220,0.6); }