/* ============================================================
   Portal de Clientes - GMBH IDS SAS
   Sistema de diseno corporativo, sobre la marca real:
   carbon #333333 + turquesa #66CDCC (colores exactos del logo)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --carbon: #333333;
  --carbon-suave: #454545;
  --turquesa: #66CDCC;
  --turquesa-oscuro: #4CA3A2;

  --fondo: #F4F5F6;
  --superficie: #FFFFFF;
  --borde: #E3E5E7;
  --texto: #1A1D1E;
  --texto-suave: #6B7278;

  --exito-texto: #15803D;
  --exito-fondo: #E8F5EB;
  --error-texto: #DC2626;
  --error-fondo: #FCEBEA;
  --alerta-texto: #B45309;
  --alerta-fondo: #FCF1DE;
  --info-texto: #2563EB;
  --info-fondo: #EAF0FD;

  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --radio: 6px;
  --radio-sm: 4px;
  --sombra: 0 1px 2px rgba(26, 29, 30, 0.04), 0 2px 8px rgba(26, 29, 30, 0.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-base);
  font-weight: 600;
  margin: 0;
  color: var(--texto);
  letter-spacing: -0.01em;
}

.mono { font-family: var(--font-mono); }
a { color: var(--turquesa-oscuro); }
button, input, select { font-family: inherit; font-size: inherit; }

/* -------------------- Barra superior -------------------- */
.barra-superior {
  background: var(--carbon);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.barra-superior .marca {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-marca {
  width: 34px;
  height: 34px;
  border-radius: var(--radio-sm);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.barra-superior .textos-marca {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.barra-superior .nombre-producto {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

.barra-superior .empresa-actual {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
}

.btn-salir {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
  padding: 7px 14px;
  border-radius: var(--radio-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.btn-salir:hover { border-color: rgba(255, 255, 255, 0.5); color: #fff; }

.grupo-derecha {
  display: flex;
  align-items: center;
  gap: 14px;
}

.barra-superior .separador {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.15);
}

.barra-superior .copyright {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  white-space: nowrap;
}

/* -------------------- Pie de pagina -------------------- */
.pie-pagina {
  text-align: center;
  padding: 24px 20px 32px;
  color: var(--texto-suave);
  font-size: 12px;
}

/* -------------------- Layout general -------------------- */
.envoltorio {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

.titulo-pagina {
  font-size: 20px;
  margin-bottom: 20px;
}

/* -------------------- Tarjeta / carta -------------------- */
.carta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 24px 24px 20px;
}

/* -------------------- Login -------------------- */
body.pagina-login {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--carbon);
}

.pantalla-login {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.tarjeta-login {
  width: 100%;
  max-width: 380px;
  text-align: left;
}

.logo-marca-login {
  width: 48px;
  height: 48px;
  border-radius: var(--radio-sm);
  margin-bottom: 20px;
}

.tarjeta-login .eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--turquesa-oscuro);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.tarjeta-login h1 {
  font-size: 22px;
  margin-bottom: 6px;
}

.tarjeta-login .subtitulo {
  color: var(--texto-suave);
  font-size: 13px;
  margin-bottom: 24px;
}

.campo { margin-bottom: 16px; }

.campo label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--texto-suave);
  margin-bottom: 6px;
}

.campo input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--fondo);
  color: var(--texto);
}
.campo input:focus {
  outline: none;
  border-color: var(--turquesa-oscuro);
  box-shadow: 0 0 0 3px rgba(102, 205, 204, 0.25);
  background: #fff;
}

.btn-primario {
  width: 100%;
  padding: 10px;
  background: var(--carbon);
  color: #fff;
  border: none;
  border-radius: var(--radio-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.btn-primario:hover { background: var(--carbon-suave); }
.btn-primario:disabled { background: var(--borde); color: var(--texto-suave); cursor: not-allowed; }

.mensaje-error {
  background: var(--error-fondo);
  color: var(--error-texto);
  border-radius: var(--radio-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}
.mensaje-error.visible { display: block; }

.mensaje-exito {
  background: var(--exito-fondo);
  color: var(--exito-texto);
  border-radius: var(--radio-sm);
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
  display: none;
}
.mensaje-exito.visible { display: block; }

/* -------------------- Encabezado de seccion (con icono) -------------------- */
.seccion-titulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.seccion-titulo .texto {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.seccion-titulo .icono {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: var(--turquesa);
  color: var(--carbon);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.seccion-titulo .contador {
  font-size: 12px;
  color: var(--texto-suave);
  font-weight: 500;
}

/* -------------------- Controles del dashboard -------------------- */
.controles {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--borde);
}

.control-grupo label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.control-grupo input, .control-grupo select {
  padding: 7px 10px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--texto);
}
.control-grupo input:focus, .control-grupo select:focus {
  outline: none;
  border-color: var(--turquesa-oscuro);
  box-shadow: 0 0 0 3px rgba(102, 205, 204, 0.2);
}

.btn-secundario {
  padding: 7px 14px;
  border: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  border-radius: var(--radio-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.btn-secundario:hover { border-color: var(--carbon); }
.btn-secundario:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-secundario:disabled:hover { border-color: var(--borde); }

.btn-acento {
  padding: 7px 14px;
  border: 1px solid var(--turquesa-oscuro);
  background: var(--turquesa-oscuro);
  color: #fff;
  border-radius: var(--radio-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.btn-acento:hover { background: #3d8f8e; }

.espaciador { flex: 1; }

/* -------------------- Resumen KPI -------------------- */
.resumen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.resumen .item {
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  border-radius: var(--radio-sm);
  padding: 12px 14px;
  background: var(--fondo);
}
.resumen .item .numero {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 600;
  display: block;
}
.resumen .item .etiqueta {
  font-size: 11px;
  color: var(--texto-suave);
  font-weight: 500;
}
.resumen .item.autorizada { border-left-color: var(--exito-texto); }
.resumen .item.no-autorizada { border-left-color: var(--error-texto); }
.resumen .item.pendiente { border-left-color: var(--alerta-texto); }

/* -------------------- Tabla de facturas -------------------- */
.tabla-wrap { overflow-x: auto; }

table.facturas {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.facturas thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borde);
  padding: 8px 10px;
  white-space: nowrap;
}

table.facturas tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
  white-space: nowrap;
}

table.facturas tbody tr:hover { background: var(--fondo); }

.col-numero, .col-total { font-family: var(--font-mono); }
.col-cliente { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------- Etiqueta de estado (pill) -------------------- */
.sello {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.sello::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.sello.autorizada { color: var(--exito-texto); background: var(--exito-fondo); }
.sello.no-autorizada { color: var(--error-texto); background: var(--error-fondo); }
.sello.pendiente { color: var(--alerta-texto); background: var(--alerta-fondo); }
.sello.en-transferencia { color: var(--info-texto); background: var(--info-fondo); }

/* -------------------- Acciones por fila (descargas) -------------------- */
.col-acciones { white-space: nowrap; }

.btn-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  border: none;
  border-radius: var(--radio-sm);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  margin-right: 5px;
}
.btn-icono.pdf { background: #C0392B; }
.btn-icono.pdf:hover { background: #A6301F; }
.btn-icono.xml { background: var(--turquesa-oscuro); }
.btn-icono.xml:hover { background: #3d8f8e; }

.sin-accion { color: var(--borde); font-size: 12px; }

/* -------------------- Paginador -------------------- */
.paginador { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde); }

.paginador-controles {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}

.paginador-controles label {
  font-size: 11px;
  font-weight: 600;
  color: var(--texto-suave);
  text-transform: uppercase;
}

.paginador-controles select {
  padding: 6px 8px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  background: var(--superficie);
}

.paginador-info { color: var(--texto-suave); font-size: 12px; }

/* -------------------- Estados vacios / carga -------------------- */
.estado-vacio, .estado-carga {
  text-align: center;
  padding: 48px 20px;
  color: var(--texto-suave);
}
.estado-vacio h3 { font-size: 15px; margin-bottom: 6px; color: var(--texto); }

/* -------------------- Responsive -------------------- */
@media (max-width: 720px) {
  .resumen { grid-template-columns: repeat(2, 1fr); }
  .envoltorio { padding: 20px 14px 48px; }
  .carta { padding: 18px 16px; }
  .barra-superior { padding: 12px 16px; }
}

/* -------------------- Accesibilidad -------------------- */
:focus-visible {
  outline: 2px solid var(--turquesa-oscuro);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}