:root{
  --uaeh-vino: #7A0019;
  --uaeh-vino-2: #5B0013;
  --uaeh-arena: #F3EFE7;
  --uaeh-dorado: #C7A26A;
  --uaeh-grafito: #1F1F24;
  --card: rgba(255,255,255,.08);
  --card-border: rgba(255,255,255,.12);
  --text: #F6F6F7;
  --muted: rgba(246,246,247,.75);
    --brand-1: #7A0026; /* vino */
  --brand-2: #C8102E; /* rojo */
  --panel: rgba(20,20,30,.55);
  --text: rgba(255,255,255,.92);
}
/* =========================
   TOPBAR (altura y layout)
   ========================= */

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15,16,22,.72);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.topbar .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  /* ↑ aquí está lo que quieres: más “ancha” (más alta) */
  padding: 22px 40px;     /* antes se sentía apretada */
  min-height: 96px;       /* asegura espacio para el botón */
}

/* En tema claro */
html[data-theme="light"] .topbar{
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(0,0,0,.10);
}

.header-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.header-brand img{
  width:auto;
  height:56px;      /* <- controla el tamaño */
  max-width:180px;  /* <- evita monstruos */
  object-fit:contain;
  border-radius:10px;
}


.logo-uaeh{
    width: 140px;      /* tamaño ideal para header */
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.header{
    display:flex;
    align-items:center;
    gap:16px;
    padding:20px 40px;
}

.title-block h1{
    font-size:20px;
    margin:0;
}

.title-block span{
    font-size:13px;
    opacity:.7;
}
img{
    max-width:100%;
    height:auto;
}
/* Fondo general */
body{
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 20% 20%, rgba(122,0,25,.25), transparent 55%),
    radial-gradient(900px 600px at 70% 35%, rgba(199,162,106,.25), transparent 55%),
    linear-gradient(135deg, #0f1016 0%, #141522 50%, #0d0e14 100%);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.12);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}

.btn-primary{
  background: linear-gradient(135deg, var(--brand-2), var(--brand-1));
  box-shadow: 0 10px 30px rgba(122,0,38,.25);
}

.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 38px rgba(200,16,46,.28);
}

/* Chips / badges */
.badge{
  background: rgba(199,162,106,.18);
  border: 1px solid rgba(199,162,106,.28);
  color: var(--text);
}

/* Tarjetas */
.card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

.grid-2{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:22px;
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}

.auth-wrap{
  min-height: calc(100vh - 68px);
  display:flex;
  align-items:center;
  padding:36px 0;
}

.auth-card{
  padding:26px;
}

.h1{
  font-size:28px;
  margin: 0 0 8px 0;
}
.p{
  margin:0 0 18px 0;
  color:var(--muted);
  line-height:1.5;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:14px;
}
.field label{ color:var(--muted); font-size:13px; }
.input{
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 12px;
  border-radius:12px;
  outline:none;
}
.input:focus{
  border-color: rgba(167,139,250,.50);
  box-shadow: 0 0 0 4px rgba(124,58,237,.20);
}

.msg{
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  padding:10px 12px;
  border-radius:12px;
  margin: 0 0 14px 0;
  color: var(--muted);
}
.msg.err{ border-color: rgba(239,68,68,.35); color: #fecaca; }
.msg.ok{ border-color: rgba(34,197,94,.35); color: #bbf7d0; }

.kpi{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 700px){
  .kpi{ grid-template-columns: 1fr; }
}
.kpi .box{
  padding:16px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.kpi .box .n{ font-size:24px; font-weight:800; }
.kpi .box .t{ color:var(--muted); margin-top:6px; font-size:13px; }

.tiles{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 900px){
  .tiles{ grid-template-columns: 1fr; }
}
.tile{
  padding:16px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.tile h3{ margin:0 0 6px 0; font-size:16px; }
.tile p{ margin:0; color:var(--muted); font-size:13px; line-height:1.45; }
.tile .hint{ margin-top:12px; font-size:12px; color: var(--muted); }
.tile .lock{ color:#fca5a5; }
.tile .ok{ color:#bbf7d0; }

.footer-note{
  margin-top:14px;
  color: var(--muted);
  font-size:12px;
}

/* ==========================
   THEME TOGGLE (dark/light)
   ========================== */

/* si no se define, asumimos dark (tu estilo actual).
   Por claridad, fijamos explícito dark también. */
html[data-theme="dark"] {
  color-scheme: dark;
}

/* Tema claro: solo sobrescribimos variables y algunos componentes
   que hoy están "hardcodeados" a blanco/transparencias oscuras */
html[data-theme="light"] {
  color-scheme: light;

  /* Variables base */
  --card: rgba(0,0,0,.04);
  --card-border: rgba(0,0,0,.12);
  --border: rgba(0,0,0,.12);
  --text: #111827;
  --muted: rgba(17,24,39,.70);

  /* Si usas panel/brand */
  --panel: rgba(255,255,255,.70);
}

/* Fondo en claro */
html[data-theme="light"] body{
  background:
    radial-gradient(1200px 700px at 18% 12%, rgba(122, 0, 25, .08), transparent 58%),
    radial-gradient(900px 600px at 78% 18%, rgba(199, 162, 106, .10), transparent 58%),
    linear-gradient(135deg, #f7f7fb 0%, #eef0f6 45%, #f7f7fb 100%);
  color: #111827;
}

/* Tarjetas/paneles (usa tus clases reales: card/panel/section) */
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .section,
html[data-theme="light"] .box,
html[data-theme="light"] .tile{
  background: rgba(255,255,255,.78);
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

/* Labels */
html[data-theme="light"] label,
html[data-theme="light"] .label{
  color: var(--muted);
}

/* Inputs (tú usas .input) */
html[data-theme="light"] .input{
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.12);
  color: #111827;
}

/* Botones: tu .btn estaba fijo en blanco; aquí lo hacemos compatible */
html[data-theme="light"] .btn{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.85);
  color: #111827;
}

html[data-theme="light"] .btn:hover{
  filter: brightness(0.98);
}

/* Badge (usuario) */
html[data-theme="light"] .badge{
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
  color: #111827;
}

/* Topbar si tu topbar es oscuro */
html[data-theme="light"] .topbar{
  background: rgba(255,255,255,.70);
  border-bottom: 1px solid rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
}

/* Botón de tema (opcional: solo para que se distinga bonito) */
.btn-theme{
  margin: 0 8px;
}

/* ====== Labels tipo "chip" ====== */
.hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
}

.hint-ok {
  background: rgba(16, 185, 129, .14);   /* verde suave */
  border-color: rgba(16, 185, 129, .35);
  color: #065f46;                         /* texto verde oscuro */
}

.hint-lock {
  background: rgba(245, 158, 11, .14);    /* ámbar suave */
  border-color: rgba(245, 158, 11, .35);
  color: #92400e;                         /* texto ámbar oscuro */
}

/* En tema oscuro, ajusta para que se vea igual de bien */
html[data-theme="dark"] .hint-ok {
  background: rgba(16, 185, 129, .18);
  border-color: rgba(16, 185, 129, .30);
  color: #d1fae5; /* verde claro */
}

html[data-theme="dark"] .hint-lock {
  background: rgba(245, 158, 11, .18);
  border-color: rgba(245, 158, 11, .30);
  color: #ffedd5; /* ámbar claro */
}

html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .section,
html[data-theme="light"] .box,
html[data-theme="light"] .tile{
  position: relative;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  overflow: hidden;
}

html[data-theme="light"] .card::before,
html[data-theme="light"] .panel::before,
html[data-theme="light"] .section::before,
html[data-theme="light"] .box::before,
html[data-theme="light"] .tile::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, rgba(122,0,25,.85), rgba(122,0,25,.15));
}
html[data-theme="light"] h1, 
html[data-theme="light"] h2{
  position: relative;
}

html[data-theme="light"] h1::after,
html[data-theme="light"] h2::after{
  content:"";
  display:block;
  width: 64px;
  height: 3px;
  margin-top: 8px;
  background: rgba(122,0,25,.85);
  border-radius: 999px;
}

/* =========================
   COTIZADOR: cards en tema claro
   ========================= */

/* Card principal */
html[data-theme="light"] .pi-card{
  position: relative;
  background: rgba(255,255,255,.80) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.08) !important;
  overflow: hidden;
}

/* Línea vino superior (estilo UAEH) */
html[data-theme="light"] .pi-card::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, rgba(122,0,25,.85), rgba(122,0,25,.15));
}

/* Header de cada card (la franja/título del card) */
html[data-theme="light"] .pi-card-h{
  border-bottom: 1px solid rgba(0,0,0,.10) !important;
  color: #111827 !important;
}

/* Texto normal dentro del cotizador */
html[data-theme="light"] .pi-card,
html[data-theme="light"] .pi-card-b,
html[data-theme="light"] .pi-title,
html[data-theme="light"] .pi-title p{
  color: #111827 !important;
}

/* Inputs del cotizador */
html[data-theme="light"] .pi-input,
html[data-theme="light"] .pi-select{
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  color: #111827 !important;
}
/* =========================
   COTIZADOR: separación entre cards
   ========================= */

/* Si tus cards del cotizador comparten la clase .pi-card */
.pi-card{
  margin-bottom: 22px; /* separación entre cards */
}

/* La última card sin margen extra */
.pi-card:last-of-type{
  margin-bottom: 0;
}

/* Extra: que los headers no “se peguen” con sombras */
.pi-card-h{
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Si el contenedor del cotizador es una columna, fuerza spacing consistente */
.pi-wrap, .pi-page, .pi-container, .cotizador-wrap{
  display: block; /* no rompe nada si ya es block */
}

/* Si tu layout usa grid/flex, este ayuda más */
.pi-wrap{
  gap: 22px;
}

/* Separación + respiración visual como dashboard */
html[data-theme="light"] .pi-card{
  margin-bottom: 26px;
}

html[data-theme="dark"] .pi-card{
  margin-bottom: 26px;
}
/* =========================================================
   FIX FINAL contraste tema oscuro
   ========================================================= */

/* Texto general sobre fondo oscuro */
html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] .container {
  color: #f8fafc;
}

html[data-theme="dark"] .h1,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] .p {
  color: #f8fafc !important;
}

/* Tarjetas claras: todo el texto debe ser oscuro */
html[data-theme="dark"] .tile,
html[data-theme="dark"] .box,
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .doc-card,
html[data-theme="dark"] .doc-history,
html[data-theme="dark"] .revision-card,
html[data-theme="dark"] .side-card,
html[data-theme="dark"] .saldo-card,
html[data-theme="dark"] .pdf-panel,
html[data-theme="dark"] .form-panel {
  background: rgba(255,255,255,.96) !important;
  color: #111827 !important;
  border-color: rgba(122,0,25,.35) !important;
}

html[data-theme="dark"] .tile h3,
html[data-theme="dark"] .tile p,
html[data-theme="dark"] .box *,
html[data-theme="dark"] .card *,
html[data-theme="dark"] .panel *,
html[data-theme="dark"] .doc-card *,
html[data-theme="dark"] .doc-history *,
html[data-theme="dark"] .revision-card *,
html[data-theme="dark"] .side-card *,
html[data-theme="dark"] .saldo-card *,
html[data-theme="dark"] .pdf-panel *,
html[data-theme="dark"] .form-panel * {
  color: #111827 !important;
}

/* Botones vino */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .doc-btn.btn-primary,
html[data-theme="dark"] button[type="submit"] {
  background: #7A0019 !important;
  color: #ffffff !important;
}

/* Botones normales */
html[data-theme="dark"] .btn,
html[data-theme="dark"] .doc-btn {
  background: #ffffff !important;
  color: #7A0019 !important;
  border-color: rgba(122,0,25,.25) !important;
}

/* Estados / badges */
html[data-theme="dark"] .hint-ok,
html[data-theme="dark"] .status-aprobado,
html[data-theme="dark"] .signed-seal-mini {
  background: #e7f8ee !important;
  color: #116236 !important;
  border-color: #9de2b9 !important;
}

html[data-theme="dark"] .status-pendiente,
html[data-theme="dark"] .badge-required {
  background: #fff6db !important;
  color: #7a4b00 !important;
  border-color: #f1c75b !important;
}

html[data-theme="dark"] .status-revision,
html[data-theme="dark"] .badge-neutral,
html[data-theme="dark"] .badge-optional {
  background: #eef5ff !important;
  color: #174ea6 !important;
  border-color: #b8d4ff !important;
}

html[data-theme="dark"] .status-rechazado,
html[data-theme="dark"] .reject-reason,
html[data-theme="dark"] .hint-lock {
  background: #fdecec !important;
  color: #991b1b !important;
  border-color: #f4aaaa !important;
}

/* Inputs/selects */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #cbd5e1 !important;
}