/* Marca Energy Cabo para EC Finanzas.
   Colores del logo: azul marino #23408E, verde #4DBA9A. */

:root {
  --ec-azul: #23408E;
  --ec-azul-oscuro: #1B3270;
  --ec-verde: #4DBA9A;
  --ec-verde-boton: #2B8A6E;
  --ec-verde-boton-hover: #23735C;
  --ec-verde-claro: #EAF6F1;

  --primary: var(--ec-azul);
  --secondary: var(--ec-azul-oscuro);
  --accent: var(--ec-verde);
  --primary-fg: #fff;

  --header-bg: var(--ec-azul);
  --header-color: #DDE6F7;
  --header-branding-color: #fff;
  --header-link-color: #fff;

  --breadcrumbs-bg: var(--ec-verde-claro);
  --breadcrumbs-fg: var(--ec-azul);
  --breadcrumbs-link-fg: var(--ec-azul);

  --link-fg: var(--ec-azul);
  --link-hover-color: var(--ec-verde-boton);
  --link-selected-fg: var(--ec-verde-boton);

  --button-bg: var(--ec-azul);
  --button-hover-bg: var(--ec-azul-oscuro);
  --default-button-bg: var(--ec-verde-boton);
  --default-button-hover-bg: var(--ec-verde-boton-hover);
  --object-tools-bg: var(--ec-azul);
  --object-tools-hover-bg: var(--ec-azul-oscuro);

  --selected-row: var(--ec-verde-claro);
  --message-success-bg: #E3F4EC;

  --font-family-primary: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #22356B;
    --secondary: #1A2850;
    --header-bg: #1A2850;
    --header-color: #C8D3EE;
    --breadcrumbs-bg: #22356B;
    --breadcrumbs-fg: #C8D3EE;
    --breadcrumbs-link-fg: #fff;
    --link-fg: #7FD3B8;
    --link-hover-color: #A8E3CF;
    --link-selected-fg: #A8E3CF;
    --button-bg: #2D4C9E;
    --button-hover-bg: #3A5BB5;
    --object-tools-bg: #2D4C9E;
    --object-tools-hover-bg: #3A5BB5;
    --selected-row: #1F3A33;
    --message-success-bg: #1F3A33;
  }
}

html[data-theme="dark"] {
  --primary: #22356B;
  --secondary: #1A2850;
  --header-bg: #1A2850;
  --header-color: #C8D3EE;
  --breadcrumbs-bg: #22356B;
  --breadcrumbs-fg: #C8D3EE;
  --breadcrumbs-link-fg: #fff;
  --link-fg: #7FD3B8;
  --link-hover-color: #A8E3CF;
  --link-selected-fg: #A8E3CF;
  --button-bg: #2D4C9E;
  --button-hover-bg: #3A5BB5;
  --object-tools-bg: #2D4C9E;
  --object-tools-hover-bg: #3A5BB5;
  --selected-row: #1F3A33;
  --message-success-bg: #1F3A33;
}

/* ---------- Barra superior ---------- */

#header {
  border-bottom: 4px solid var(--ec-verde);
}

#site-name a.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.marca-icono {
  height: 32px;
  width: auto;
}

.marca-nombre {
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}

.marca-logo {
  display: none;
}

/* Botones principales en negritas */
input[type=submit].default,
.submit-row input.default {
  font-weight: 700;
}

/* Títulos de sección con acento verde */
.module h2,
.module caption,
.inline-group h2 {
  border-left: 4px solid var(--ec-verde);
}

/* ---------- Pantalla de inicio de sesión ---------- */

body.login {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--ec-verde-claro) 0%, #fff 60%);
}

body.login .submit-row input[type=submit] {
  background: var(--ec-verde-boton);
  font-weight: 700;
  padding: 10px 28px;
}

body.login .submit-row input[type=submit]:hover {
  background: var(--ec-verde-boton-hover);
}

body.login #site-name a.marca {
  flex-direction: column;
  gap: 6px;
}

body.login .marca-nombre {
  display: block;
  color: var(--ec-azul);
  font-size: 0.95rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

html[data-theme="dark"] body.login {
  background: var(--body-bg);
}

body.login #container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(35, 64, 142, 0.15);
  border: none;
}

body.login #header {
  background: #fff;
  justify-content: center;
  padding: 28px 24px 18px;
  border-bottom: 4px solid var(--ec-verde);
}

body.login #site-name {
  margin: 0;
}

body.login .marca-logo {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}

body.login .marca-icono {
  display: none;
}

body.login #header .theme-toggle {
  display: none;
}

/* ---------- Reportes ---------- */

.reportes-lista {
  margin-bottom: 30px;
}

.reportes-lista th a {
  font-weight: 700;
}

.reportes-lista td {
  color: var(--body-quiet-color);
}

.reporte-encabezado {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.reporte-subtitulo {
  margin: 0;
  color: var(--body-quiet-color);
}

.reporte-descargas {
  display: flex;
  gap: 8px;
}

.reporte-descargas a.button {
  background: var(--default-button-bg);
  color: #fff;
  padding: 8px 14px;
  border-radius: 4px;
  font-weight: 700;
}

.reporte-descargas a.button:hover {
  background: var(--default-button-hover-bg);
}

.reporte-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--darkened-bg);
  border-radius: 4px;
}

.reporte-filtros label {
  font-weight: 600;
}

.reporte-aviso {
  padding: 8px 12px;
  margin: 8px 0;
  background: #FFF3CD;
  color: #6b3d06;
  border-left: 4px solid #d97706;
  border-radius: 3px;
}

.reporte-seccion {
  margin-bottom: 24px;
}

.reporte-tabla {
  overflow-x: auto;
}

.reporte-seccion table {
  width: 100%;
}

.reporte-seccion th.num,
.reporte-seccion td.num {
  text-align: right;
  white-space: nowrap;
}

.reporte-seccion tfoot td {
  font-weight: 700;
  background: var(--selected-row);
  border-top: 2px solid var(--ec-verde);
}

.reporte-vacio,
.reporte-nota {
  color: var(--body-quiet-color);
  font-style: italic;
}

.reporte-nota {
  margin: 6px 0 0;
}

.negativo {
  color: #b42318;
}

.semaforo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Celular (pantallas angostas) ---------- */

@media (max-width: 767px) {
  /* Lista de reportes del inicio: cada reporte como tarjeta (nombre arriba, descripción abajo). */
  .reportes-lista table,
  .reportes-lista tbody,
  .reportes-lista tr,
  .reportes-lista th,
  .reportes-lista td {
    display: block;
    width: auto;
  }

  .reportes-lista caption {
    display: block;
  }

  .reportes-lista th {
    border-bottom: none;
    padding-bottom: 2px;
    font-size: 0.95rem;
  }

  .reportes-lista td {
    padding-top: 0;
  }

  /* Tablas anchas (listas y reportes): las filas no se parten letra por letra; se desliza de lado
     y la primera columna (qué registro es) se queda fija a la izquierda. */
  #changelist .results,
  .reporte-tabla {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #result_list th,
  #result_list td,
  .reporte-tabla th,
  .reporte-tabla td.num {
    white-space: nowrap;
  }

  /* Textos largos: varios renglones, pero con ancho mínimo para que nunca queden letra por letra. */
  #result_list td.field-descripcion,
  #result_list td.field-que,
  #result_list td.field-concepto,
  .reporte-tabla td:not(.num) {
    white-space: normal;
    min-width: 120px;
    max-width: 240px;
  }

  #result_list tr > :first-child,
  .reporte-tabla tr > :first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--body-bg);
    max-width: 150px;
    white-space: normal;
    box-shadow: 2px 0 0 var(--hairline-color);
  }

  #result_list thead tr > :first-child,
  .reporte-tabla thead tr > :first-child {
    background: var(--darkened-bg);
  }

  /* Reportes: encabezado, botones y filtros en columna. */
  .reporte-descargas {
    width: 100%;
  }

  .reporte-descargas a.button {
    flex: 1;
    text-align: center;
  }

  .reporte-filtros label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  /* Barra superior más compacta. */
  .marca-icono {
    height: 26px;
  }

  #user-tools {
    font-size: 0.7rem;
  }
}

.semaforo-rojo { background: #F8D7DA; color: #8b1a1a; }
.semaforo-amarillo { background: #FFF3CD; color: #7a4d00; }
.semaforo-verde { background: #D4EDDA; color: #14532d; }
.semaforo-sin_contrato { background: #E9ECEF; color: #444; }