@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300..700;1,300..700&display=swap");

:root {
  --tinta: #1c2430;
  --tinta-suave: #5b6676;
  --fondo: #f4f6f9;
  --blanco: #ffffff;
  --primario: #1d5c96;
  --primario-oscuro: #164a7a;
  --borde: #dde3ea;
  --exito: #1f7a4d;
  --alerta-hoy: #b97a08;
  --alerta-vencida: #b3382e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Roboto Condensed", -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
}

button { font-family: inherit; }

.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  padding: 0.8rem 2rem;
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
}

.marca {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--primario);
  text-decoration: none;
}

.cabecera nav { display: flex; gap: 1.2rem; align-items: center; }
.cabecera nav a { color: var(--tinta-suave); text-decoration: none; font-weight: 500; }
.cabecera nav a:hover { color: var(--primario); }

.boton, button {
  background: var(--primario);
  color: #fff !important;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover, button:hover { background: var(--primario-oscuro); }

main { max-width: 1000px; margin: 0 auto; padding: 1.5rem 2rem 3rem; }

h1 { margin: 0.5rem 0 1rem; font-size: 1.5rem; }
.sub { color: var(--tinta-suave); margin-top: -0.5rem; }

.filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.ficha {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  color: var(--tinta-suave);
  text-decoration: none;
}
.ficha strong { color: var(--tinta); margin-left: 0.3rem; }
.ficha.activa { border-color: var(--primario); color: var(--primario); }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: hidden;
}
th, td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--borde); }
th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tinta-suave); }
tr:last-child td { border-bottom: none; }
td a { color: var(--primario); font-weight: 600; text-decoration: none; }
td small { display: block; color: var(--tinta-suave); }

.etiqueta {
  background: var(--etapa-suave, #e8f0f8);
  color: var(--etapa-fuerte, var(--primario));
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.ficha .punto {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--etapa-fuerte, var(--borde));
  margin-right: 0.3rem;
}

.alerta { font-weight: 600; }
.alerta.hoy { color: var(--alerta-hoy); }
.alerta.vencida { color: var(--alerta-vencida); }

.vacio { color: var(--tinta-suave); }

.formulario { background: var(--blanco); border: 1px solid var(--borde); border-radius: 10px; padding: 1.2rem 1.5rem; }
.formulario.estrecho { max-width: 640px; }
fieldset { border: none; padding: 0; margin: 0 0 1.2rem; }
legend { font-weight: 700; margin-bottom: 0.6rem; }
label { display: block; margin-bottom: 0.8rem; font-size: 0.9rem; font-weight: 600; }
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
}
.fila { display: flex; gap: 1rem; }
.fila label { flex: 1; }
.acciones { display: flex; gap: 1rem; align-items: center; }
.acciones a { color: var(--tinta-suave); }

.encabezado-detalle { display: flex; justify-content: space-between; align-items: start; }

.tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.tarjeta h3 { margin: 0 0 0.6rem; font-size: 1rem; }

.linea-etapas { list-style: none; padding: 0; margin: 0; }
.linea-etapas li {
  padding: 0.3rem 0 0.3rem 1.4rem;
  position: relative;
  color: var(--tinta-suave);
  font-size: 0.9rem;
}
.linea-etapas li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.65rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--borde);
}
.linea-etapas li.hecha { color: var(--exito); }
.linea-etapas li.hecha::before { background: var(--exito); }
.linea-etapas li.actual { color: var(--etapa-fuerte, var(--tinta)); font-weight: 700; }
.linea-etapas li.actual::before { background: var(--etapa-fuerte, var(--primario)); }

.compacta td { border: none; padding: 0.35rem 0; }
.cifra { text-align: right; font-weight: 700; }
.cifra-grande { font-size: 1.7rem; font-weight: 700; margin: 0.2rem 0; }
.cifra-grande span { font-size: 0.9rem; font-weight: 500; color: var(--tinta-suave); }

.descargo { color: var(--tinta-suave); font-size: 0.82rem; }
.centro { text-align: center; }

.fila-gestion { display: flex; gap: 0.6rem; margin-bottom: 0.8rem; }
.fila-gestion input { margin-top: 0; }

.bitacora { list-style: none; padding: 0; margin: 0; }
.bitacora li { padding: 0.45rem 0; border-bottom: 1px solid var(--borde); font-size: 0.92rem; }
.bitacora li:last-child { border-bottom: none; }
.bitacora time { color: var(--tinta-suave); margin-right: 0.6rem; font-variant-numeric: tabular-nums; }

.pie {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem 2rem 2rem;
  color: var(--tinta-suave);
  font-size: 0.8rem;
}

/* Color por etapa del trámite: se usa en el tablero, la lista y los filtros. */
.etapa-0 { --etapa-fuerte: #64748b; --etapa-suave: #eef1f5; }
.etapa-1 { --etapa-fuerte: #1d5c96; --etapa-suave: #e3edf7; }
.etapa-2 { --etapa-fuerte: #7c3aed; --etapa-suave: #f1eafe; }
.etapa-3 { --etapa-fuerte: #b97a08; --etapa-suave: #fdf3e0; }
.etapa-4 { --etapa-fuerte: #0f766e; --etapa-suave: #e0f2f0; }
.etapa-5 { --etapa-fuerte: #1f7a4d; --etapa-suave: #e3f3ea; }

.tablero {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 1rem;
}
.columna {
  flex: 1;
  min-width: 210px;
  background: var(--etapa-suave, #eceff4);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--etapa-fuerte, var(--borde));
  border-radius: 10px;
  padding: 0.7rem;
}
.columna h3 {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--etapa-fuerte, var(--tinta-suave));
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
}
.columna .contador {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 0 0.5rem;
  color: var(--etapa-fuerte, var(--tinta));
}
.columna.recibiendo { border-color: var(--etapa-fuerte, var(--primario)); }
.zona-tarjetas { min-height: 2.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.tarjeta-cliente {
  display: block;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--etapa-fuerte, var(--borde));
  border-radius: 8px;
  padding: 0.6rem 0.7rem;
  text-decoration: none;
  color: var(--tinta);
  cursor: grab;
}
.tarjeta-cliente:hover { border-color: var(--etapa-fuerte, var(--primario)); }
.tarjeta-cliente.arrastrando { opacity: 0.4; }
.tarjeta-cliente strong { display: block; font-size: 0.92rem; }
.tarjeta-cliente small { color: var(--tinta-suave); display: block; margin: 0.15rem 0; }
.tarjeta-cliente .alerta { font-size: 0.8rem; }

.fondo-ingreso { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.caja-ingreso {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 2rem 2.2rem;
  width: min(360px, 90vw);
  text-align: center;
}
.caja-ingreso h1 { font-size: 1.2rem; }
.caja-ingreso label { text-align: left; }
.caja-ingreso button { width: 100%; margin-top: 0.4rem; }

.caja-ingreso.ancha { width: min(560px, 92vw); }
.formulario-registro { text-align: left; }
.formulario-registro button { width: 100%; margin-top: 0.4rem; }
.oculto { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
.opciones-rol { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.2rem 0; }
.opcion-rol {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  text-align: center;
  padding: 1.2rem 1rem;
  border: 1px solid var(--borde);
  border-radius: 12px;
  text-decoration: none;
  color: var(--tinta);
}
.opcion-rol:hover { border-color: var(--primario); background: #f2f7fc; }
.opcion-rol .icono { font-size: 1.8rem; }
.opcion-rol span:not(.icono) { color: var(--tinta-suave); font-size: 0.85rem; }
@media (max-width: 560px) { .opciones-rol { grid-template-columns: 1fr; } }

.formulario-documento { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; margin-bottom: 0.8rem; }
.formulario-documento label { flex: 1; min-width: 180px; margin: 0; }
.formulario-documento button { white-space: nowrap; }
.fila-gestion select { width: auto; margin-top: 0; }
.fila-gestion input[type="file"] { margin-top: 0; }
.bitacora a { color: var(--primario); text-decoration: none; font-weight: 600; }

.casilla { display: flex; align-items: center; gap: 0.35rem; margin: 0; white-space: nowrap; font-weight: 500; }
.casilla input { width: auto; margin: 0; }

.etiqueta.interna { background: #f3e8e7; color: var(--alerta-vencida); margin-left: 0.4rem; }

@media (max-width: 720px) {
  .fila, .tarjetas { display: block; }
  main { padding: 1rem; }
}