/* =====================================================
   SISTEMA DE RENDICIONES — estilos base
   ===================================================== */

:root {
  --color-primario:   #1a5276;
  --color-secundario: #2e86c1;
  --color-acento:     #148f77;
  --color-peligro:    #c0392b;
  --color-alerta:     #d35400;
  --color-fondo:      #f4f6f8;
  --color-borde:      #dce1e7;
  --color-texto:      #2c3e50;
  --color-texto-claro:#6c757d;

  /* semáforo plazos */
  --color-verde:      #1e8449;
  --color-amarillo:   #d35400;
  --color-rojo:       #c0392b;

  /* estados egreso */
  --estado-borrador:   #7f8c8d;
  --estado-enviado:    #2980b9;
  --estado-revision:   #8e44ad;
  --estado-aprobado:   #1e8449;
  --estado-observado:  #d35400;
  --estado-corregido:  #2471a3;
  --estado-rechazado:  #c0392b;

  --radio: 6px;
  --sombra: 0 1px 4px rgba(0,0,0,.1);
  --fuente: 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--fuente);
  font-size: 14px;
  color: var(--color-texto);
  background: var(--color-fondo);
}

/* ----- TOPBAR ----- */
.topbar {
  background: var(--color-primario);
  color: #fff;
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--sombra);
}
.topbar__marca { font-size: 16px; font-weight: 600; letter-spacing: .3px; }
.topbar__usuario { font-size: 13px; opacity: .85; display: flex; gap: 16px; align-items: center; }
.topbar__usuario a { color: #fff; text-decoration: none; opacity: .7; }
.topbar__usuario a:hover { opacity: 1; }

/* ----- CONTENEDOR ----- */
.contenedor {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px;
}

/* ----- BREADCRUMB ----- */
.breadcrumb {
  font-size: 12px;
  color: var(--color-texto-claro);
  margin-bottom: 16px;
}
.breadcrumb a { color: var(--color-secundario); text-decoration: none; }
.breadcrumb span::before { content: ' / '; }

/* ----- CABECERA EXPEDIENTE ----- */
.cabecera-exp {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  box-shadow: var(--sombra);
}
.cabecera-exp__titulo h2 { font-size: 17px; color: var(--color-primario); }
.cabecera-exp__titulo p  { font-size: 12px; color: var(--color-texto-claro); margin-top: 2px; }
.cabecera-exp__stats { display: flex; gap: 24px; }
.stat { text-align: center; }
.stat__valor { font-size: 20px; font-weight: 700; color: var(--color-primario); }
.stat__label { font-size: 11px; color: var(--color-texto-claro); }

/* ----- TARJETA ----- */
.tarjeta {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.tarjeta__cabecera {
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-borde);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tarjeta__cabecera h3 { font-size: 14px; font-weight: 600; }
.tarjeta__cuerpo { padding: 0; }

/* ----- TABLA ----- */
.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla th {
  background: #f0f3f6;
  padding: 9px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--color-texto-claro);
  border-bottom: 1px solid var(--color-borde);
  white-space: nowrap;
}
.tabla td {
  padding: 10px 12px;
  border-bottom: 1px solid #eef0f3;
  vertical-align: middle;
}
.tabla tr:last-child td { border-bottom: none; }
.tabla tr:hover td { background: #f8fafc; }
.tabla .col-num  { width: 48px; text-align: center; }
.tabla .col-mon  { text-align: right; white-space: nowrap; }
.tabla .col-acc  { width: 120px; text-align: center; }

/* ----- BADGES ESTADO ----- */
.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #fff;
}
.badge--borrador  { background: var(--estado-borrador); }
.badge--enviado   { background: var(--estado-enviado); }
.badge--revision  { background: var(--estado-revision); }
.badge--aprobado  { background: var(--estado-aprobado); }
.badge--observado { background: var(--estado-observado); }
.badge--corregido { background: var(--estado-corregido); }
.badge--rechazado { background: var(--estado-rechazado); }

/* ----- SEMÁFORO PLAZO ----- */
.semaforo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
}
.semaforo__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.semaforo--verde   .semaforo__dot { background: var(--color-verde); }
.semaforo--amarillo .semaforo__dot { background: var(--color-amarillo); }
.semaforo--rojo    .semaforo__dot { background: var(--color-rojo); }
.semaforo--verde   { color: var(--color-verde); }
.semaforo--amarillo { color: var(--color-amarillo); }
.semaforo--rojo    { color: var(--color-rojo); }

/* ----- BOTONES ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radio);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn--primario   { background: var(--color-secundario); color: #fff; }
.btn--acento     { background: var(--color-acento);     color: #fff; }
.btn--peligro    { background: var(--color-peligro);    color: #fff; }
.btn--ghost      { background: transparent; color: var(--color-secundario); border: 1px solid var(--color-secundario); }
.btn--sm         { padding: 4px 10px; font-size: 12px; }

/* ----- ALERTA ----- */
.alerta {
  padding: 10px 14px;
  border-radius: var(--radio);
  font-size: 13px;
  margin-bottom: 16px;
  border-left: 4px solid;
}
.alerta--info    { background: #ebf5fb; border-color: var(--color-secundario); }
.alerta--exito   { background: #eafaf1; border-color: var(--color-verde); }
.alerta--alerta  { background: #fef5e7; border-color: var(--color-amarillo); }
.alerta--error   { background: #fdedec; border-color: var(--color-peligro); }

/* ----- LOGIN ----- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primario);
}
.login-box {
  background: #fff;
  border-radius: var(--radio);
  padding: 36px 40px;
  width: 360px;
  box-shadow: 0 4px 24px rgba(0,0,0,.2);
}
.login-box h1 { font-size: 18px; color: var(--color-primario); margin-bottom: 6px; }
.login-box p  { font-size: 12px; color: var(--color-texto-claro); margin-bottom: 24px; }

/* ----- FORMULARIO ----- */
.campo { margin-bottom: 16px; }
.campo label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--color-texto); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  font-size: 13px;
  font-family: var(--fuente);
  color: var(--color-texto);
  background: #fff;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--color-secundario);
  box-shadow: 0 0 0 3px rgba(46,134,193,.15);
}
.campo--error input { border-color: var(--color-peligro); }
.campo__error { font-size: 11px; color: var(--color-peligro); margin-top: 4px; }

/* ----- VACÍO ----- */
.vacio {
  text-align: center;
  padding: 48px 20px;
  color: var(--color-texto-claro);
}
.vacio__icono { font-size: 40px; margin-bottom: 12px; }
.vacio p { font-size: 14px; }

/* =====================================================
   FORMULARIO NUEVO / CORREGIR EGRESO
   ===================================================== */
.nuevo-egreso-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 20px;
}
.nuevo-egreso-header h2 {
  margin: 0;
  font-size: 17px;
  color: var(--color-primario);
}
.periodo-tag {
  font-size: 12px;
  background: var(--color-secundario);
  color: #fff;
  padding: 2px 10px;
  border-radius: 10px;
}

/* Grid de dos paneles */
.paneles-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .paneles-form { grid-template-columns: 1fr; }
}

.panel-form {
  border: 1px solid #dce3eb;
  border-radius: 6px;
  overflow: hidden;
}
.panel-form__header {
  background: var(--color-alerta);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 16px;
  letter-spacing: .3px;
}
.panel-form__body {
  padding: 16px;
  background: #fff;
}

/* Fila de dos campos dentro del panel */
.campos-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Campo de solo lectura (glosa auto, tipo financiamiento) */
.campo__readonly {
  background: #f4f9f4;
  border-color: #27ae60 !important;
  color: #1a5c2a;
  cursor: default;
}

/* Barra de totales y acciones */
.totales-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 20px;
  background: #f8fafc;
  border: 1px solid #dce3eb;
  border-radius: 6px;
}
.totales-bar__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.totales-bar__label {
  font-size: 11px;
  color: var(--color-texto-claro);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.totales-bar__valor {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primario);
}
.totales-bar__acciones {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

/* Breadcrumb */
.breadcrumb {
  font-size: 13px;
  color: var(--color-texto-claro);
  margin-bottom: 16px;
}
.breadcrumb a {
  color: var(--color-secundario);
  text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }