/* ============================================================================
   EXACTA IA — Estilos (menú + iframe + tema claro para ASP + utilidades)
   ============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");

/* ---------- Variables ---------- */
:root{
  --bg:#0d1117; --bar:#111827; --item:#151b23; --hover:#1f2937;
  --text:#e8eaee; --muted:#a3acb7;
  --accent:#ff6a00; --accent-2:#ffa24d;
  --ring:0 0 0 2px rgba(255,106,0,.35);
  --radius:12px; --maxw:1200px;

  /* Forms (modo oscuro base; el claro se define en .theme-light) */
  --form-bg:#171c21; --form-bg-hover:#1b222c; --form-border:#26303a;
  --form-border-hover:#2f3a46; --form-border-focus:#3b4958;
  --form-text:#e8eaee; --form-placeholder:#97a1ab; --form-label:#b2bac4;

  /* Layout dinámico */
  --header-h:180px;      /* JS lo recalcula */
  --content-gap:24px;    /* espacio bajo el menú (ajústalo a gusto) */
}

/* ---------- Reset + tipografía global (60%) ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:9px/1.35 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial;
}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit}

/* Contenedores */
.container{max-width:var(--maxw); margin:0 auto; padding:12px 16px}
.container--fluid{max-width:none; width:100%; padding-left:12px; padding-right:12px}

/* ===========================
   MENÚ HORIZONTAL (sticky)
=========================== */
.nav-wrap{position:sticky; top:0; z-index:1000; backdrop-filter:saturate(140%) blur(6px)}
.nav{
  background:linear-gradient(180deg, rgba(255,106,0,.08), transparent 60%), var(--bar);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  padding:4px 10px; /* compacto */
}

/* Marca */
.brand{display:flex; align-items:center; gap:10px; padding:2px 10px 2px; font-weight:600; letter-spacing:.2px}
.brand__dot{width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent));
  box-shadow:0 0 110px rgba(255,106,0,.55);
}
.brand__name{color:#fff}
.brand__sub{color:var(--muted); font-weight:400; font-size:.95em}

/* Barra horizontal */
.menubar{display:flex; gap:4px; list-style:none; margin:0; padding:0 6px 2px}
.menubar>li{position:relative}

.item,.toggle{
  display:inline-flex; align-items:center; gap:10px;
  padding:4px 10px; border-radius:10px; border:0; background:transparent; color:inherit;
  cursor:pointer; outline:none; white-space:nowrap; transition:background .18s ease, color .18s ease;
  font-size:10px; line-height:1.1;
}
.item:hover,.toggle:hover{background:var(--hover)}
.item:focus-visible,.toggle:focus-visible{box-shadow:var(--ring)}
.chev{opacity:.85; width:10px; height:10px; transition:transform .18s ease, opacity .18s ease}

/* Submenús (lvl1 abajo, lvl2+ flyout) */
.submenu{
  position:absolute; top:100%; left:0; min-width:220px;
  list-style:none; margin:4px 0 0; padding:4px;
  background:var(--item); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.45);
  display:none; /* base */
}
.submenu>li{position:relative}
.submenu .submenu{top:0; left:100%; margin:0 0 0 6px}
.submenu a,.submenu .toggle{width:100%; text-align:left; padding:5px 7px; border-radius:7px}

/* Fallback SIN JS: abre por hover/focus */
.menubar > li:hover > .submenu,
.menubar > li:focus-within > .submenu,
.submenu li:hover > .submenu,
.submenu li:focus-within > .submenu{ display:block }

/* Con JS: también mostrar si el <li> está .open o si el toggle tiene data-open="true" */
.menubar > li.open > .submenu,
.submenu li.open > .submenu,
.toggle[data-open="true"] + .submenu{ display:block }
.toggle[aria-expanded="true"] .chev{ transform:rotate(90deg); opacity:1 }

/* Texto ayuda */
.helper{color:var(--muted); font-size:7.5px; margin:2px 10px 4px}

/* ===========================
   CONTENIDO (iframe)
=========================== */
.frame-wrap{ padding: var(--content-gap) 0 110px }
.frame{
  display:block;
  width:100%;
  height:100%;                                   /* crece con contenido */
  min-height:calc(100vh - var(--header-h) - var(--content-gap));
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px; background:#0f141b;        /* el interior claro lo da .theme-light en la ASP */
  box-shadow:0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
}
@supports (height:100dvh){
  .frame{ min-height:calc(100dvh - var(--header-h) - var(--content-gap)); }
}

/* ===========================
   COMPONENTES (modo oscuro base)
=========================== */
.card{
  background:linear-gradient(180deg, rgba(255,106,0,.06), transparent 60%), #0f141b;
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px; padding:12px 12px;
  box-shadow:0 10px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03);
}
.h1{ font-size:11.2px; font-weight:600; margin:0 0 10px }
.h2{ font-size:10.10px; font-weight:600; margin:10px 0 6px }
.lead{ color:var(--muted); margin:0 0 6px; font-size:8.4px }

/* ===========================
   FORMULARIOS (modo oscuro base)
=========================== */
.form{ display:grid; gap:10px }
.field{ display:grid; gap:4px }
.label{ font-size:7.5px; line-height:1.25; color:var(--form-label); letter-spacing:.2px }

.ui-input,.ui-select,.ui-textarea{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; font-size:8.4px; line-height:1.35; padding:7px 9px;
  border-radius:10px; border:1px solid var(--form-border);
  background:var(--form-bg); color:var(--form-text); outline:none;
  transition:background .18s, border-color .18s, box-shadow .18s;
}
.ui-input::placeholder,.ui-textarea::placeholder{ color:var(--form-placeholder) }
.ui-input:hover,.ui-select:hover,.ui-textarea:hover{ background:var(--form-bg-hover); border-color:var(--form-border-hover) }
.ui-input:focus-visible,.ui-select:focus-visible,.ui-textarea:focus-visible{ border-color:var(--form-border-focus); box-shadow:var(--ring); background:var(--form-bg-hover) }
.ui-input[disabled],.ui-select[disabled],.ui-textarea[disabled]{ opacity:.6; cursor:not-allowed }

.select-wrap{ position:relative }
.select-wrap .ui-select{ padding-right:26px }
.select-wrap::after{ content:"▾"; position:absolute; right:10px; top:50%; transform:translateY(-50%); opacity:.75; font-size:6.5px; color:var(--form-label) }

/* ===========================
   TEMA CLARO para páginas ASP (dentro del iframe)
   Aplica sólo si la ASP marca <body class="theme-light">
=========================== */

/* El marco del iframe alrededor del contenido */
.frame{ background:#f3f4f6; border-color:#e5e7eb; }

/* Fondo y texto general */
.theme-light, .theme-light body{
  background:#f3f4f6;
  color:#111827;
}

/* Tarjetas/contenedores internos (claro) */
.theme-light .card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  color:#111827;
}

/* Formularios (flat claro) */
.theme-light .label{ color:#374151; }
.theme-light .ui-input,
.theme-light .ui-select,
.theme-light .ui-textarea{
  background:#ffffff;
  color:#111827;
  border:1px solid #d1d5db;
}
.theme-light .ui-input::placeholder,
.theme-light .ui-textarea::placeholder{ color:#9ca3af; }
.theme-light .ui-input:hover,
.theme-light .ui-select:hover,
.theme-light .ui-textarea:hover{
  background:#f9fafb;
  border-color:#cbd5e1;
}
.theme-light .ui-input:focus-visible,
.theme-light .ui-select:focus-visible,
.theme-light .ui-textarea:focus-visible{
  border-color:#a8b6c7;
  box-shadow:0 0 0 2px rgba(255,106,0,.22);
}

/* ===== Tablas CLARAS para TODAS las <table> (Courier New pequeño) ===== */
.theme-light table{
  width:100%;
  border-collapse:collapse;
  background:#f9fafb;                /* gris muy claro */
  color:#111827;                     /* texto gris oscuro */
  font-family:"Courier New", Courier, monospace;
  font-size:8x;                    /* pequeño */
  line-height:1.25;
  border:1px solid #e5e7eb;
}
.theme-light thead th{
  font-weight:700;                   /* negrita siempre */
  text-align:left;
  padding:4px 5px;
  background:#e5e7eb;                /* encabezado */
  border-bottom:2px solid #d1d5db;
}
.theme-light tbody td{
  padding:4px 5px;
  border-top:1px solid #e5e7eb;
}
.theme-light tbody tr:hover td{
  background:#f3f4f6;
}

/* ===== Botón Exacta (gris + texto naranja; hover celeste + negro) ===== */
.theme-light button.btn-exacta,
.theme-light a.btn-exacta,
.theme-light input[type="button"].btn-exacta,
.theme-light input[type="submit"].btn-exacta,
.theme-light input[type="reset"].btn-exacta{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border:1px solid #d1d5db !important;
  border-radius:10px;
  background:#e5e7eb !important;   /* gris */
  color:#ffa24d !important;         /* naranja suave */
  text-decoration:none; line-height:1.2; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, box-shadow .18s;
  font-family:inherit; font-size:inherit;
}
.theme-light button.btn-exacta:hover,
.theme-light a.btn-exacta:hover,
.theme-light input[type="button"].btn-exacta:hover,
.theme-light input[type="submit"].btn-exacta:hover,
.theme-light input[type="reset"].btn-exacta:hover,
.theme-light button.btn-exacta:focus-visible,
.theme-light a.btn-exacta:focus-visible,
.theme-light input[type="button"].btn-exacta:focus-visible,
.theme-light input[type="submit"].btn-exacta:focus-visible,
.theme-light input[type="reset"].btn-exacta:focus-visible{
  background:#bae6fd !important;   /* celeste */
  border-color:#93c5fd !important;
  color:#111827 !important;         /* negro */
  outline:none; box-shadow:0 0 0 2px rgba(59,130,246,.28);
}
.theme-light button.btn-exacta:active,
.theme-light a.btn-exacta:active,
.theme-light input[type="button"].btn-exacta:active,
.theme-light input[type="submit"].btn-exacta:active,
.theme-light input[type="reset"].btn-exacta:active{
  background:#a5d8fb !important;
}
.theme-light button.btn-exacta:disabled,
.theme-light input[type="button"].btn-exacta:disabled,
.theme-light input[type="submit"].btn-exacta:disabled,
.theme-light input[type="reset"].btn-exacta:disabled,
.theme-light a.btn-exacta[aria-disabled="true"]{
  opacity:.55; cursor:not-allowed; pointer-events:none; box-shadow:none;
}
/* tamaño pequeño opcional */
.theme-light .btn-exacta--sm{ padding:4px 10px; border-radius:7px; }

.a-gradiente {
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: .4rem;
  text-decoration: none;
  font-weight: bold;
  color: #0056b3;
  background: linear-gradient(90deg,#f0f0f0 0%,#d9d9d9 50%,#a6a6a6 100%);
}

/* estado activo */
.tablink.active {
  background: #0056b3;
  color: #fff;
}

.tabcontent {
  display: none;   /* oculto por defecto */
  padding: 10px;
  border: 1px solid #ccc;
}

.a-text-grad {
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: .4rem;
  text-decoration: none;
  font-weight: bold;                       /* letras gruesas */
  background-color: #f0f0f0;               /* fondo gris */
  
  background-image: linear-gradient(90deg, 
                      #007BFF 0%,          /* azul más claro */
                      #004085 100%);       /* azul más oscuro */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;    /* truco pa’ ver el gradiente en el texto */
  background-clip: text;
  color: transparent;

  transition: filter .2s ease;
}

.a-text-grad:hover {
  filter: brightness(1.1);                 /* efecto de brillo en hover */
}


ul.tabmenu {
  list-style: none;           /* sacar viñetas */
  margin: 0;
  padding: 0;
  display: flex;              /* los hijos se alinean horizontal */
  border-bottom: 2px solid #ccc;
}

ul.tabmenu li {
  margin: 0;
}

ul.tabmenu li a {
  display: block;
  padding: .6rem 1.2rem;
  text-decoration: none;
  font-weight: bold;
  color: #0056b3;
  background: linear-gradient(90deg,#f0f0f0 0%,#d9d9d9 50%,#a6a6a6 100%);
  border: 1px solid #ccc;
  border-bottom: none;        /* para que se vea pegado al contenido */
  border-radius: 6px 6px 0 0; /* redondeado arriba */
}

ul.tabmenu li a.active {
  background: #0056b3;
  color: #fff;
}

/* contenedor de las pestañas */
ul.tabmenu{
  list-style:none;margin:0;padding:0;
  display:flex;gap:.25rem;
  border-bottom:2px solid #ccc;
}

/* cada pestaña (el <a>) */
ul.tabmenu li a.a-gradiente{
  display:block;
  padding:.6rem 1rem;
  text-decoration:none;
  font-weight:700;
  color:#0056b3;
  background:linear-gradient(90deg,#f0f0f0 0%,#d9d9d9 50%,#a6a6a6 100%);
  border:1px solid #ccc;
  border-bottom:none;               /* pa’ que parezca pegá al contenido */
  border-radius:10px 10px 0 0;
}

/* activa */
ul.tabmenu li a.tablink.active{
  background:#0056b3;
  color:#fff;
}
.tabcontent{display:none;padding:5px;border:1px solid #ccc;border-top:none;}


/* Aplica a todas las tablas */
table {
  border-collapse: collapse;      /* une los bordes */
  border: 1px solid #ddd;         /* borde general finito */
  width: 100%;
}

/* Cabeceras y celdas */
table th,
table td {
  border: 1px solid #eee;         /* bordecito finito entre celdas */
  padding: 4px 6px;               /* menos espacio = filas más delgadas */
  line-height: 1.2;               /* altura de línea más baja */
  font-size: 10px;                /* letra más compacta (ajustable) */
}

/* Inputs y selects dentro de tablas */
table input,
table select {
  padding: 3px 6px;
  height: 210px;
  font-size: 10px;
}

<style>
/* Compacta TODA tabla de esta página */
body table { 
  border-collapse: collapse !important;
  border: none !important;               /* mata el borde del atributo border="1" */
  width: 100%;
}

/* Celdas más delgadas */
body table th,
body table td {
  border: 1px solid #eee !important;     /* línea finita entre celdas */
  padding: 2px 4px !important;           /* baja el relleno */
  line-height: 1.1 !important;           /* altura compacta */
  font-size: 10px !important;            /* letra un pelito más chica */
  font-weight: 500;
}

/* Encabezado un poco más marcado pero delgao */
body table th {
  background: #fafafa;
  border-color: #e9e9e9 !important;
  font-weight: 600;
}

/* Inputs/selects/botone dentro de tablas: chicos */
body table input,
body table select,
body table button {
  height: 26px !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
}

/* Botón exacta más delgao dentro de tablas */
body table .btn-exacta {
  padding: 3px 10px !important;
}

/* Opcional: reduce margen vertical entre filas rayadas si tu .table-striped mete espacio */
body table tr {
  height: auto !important;               /* por si algún CSS fija alturas grandes */
}
</style>

table {
  border-collapse: collapse;  /* bordes unidos */
  width: 100%;
  font-size: 10px;            /* letra más chica */
  font-family: Arial, sans-serif; 
}

table th, table td {
  border: 1px solid #ccc;     /* borde delgado y gris claro */
  padding: 4px 6px;           /* espacio interno */
  text-align: left;           /* alineación del texto */
}

table th {
  background-color: #f5f5f5;  /* fondo para encabezados */
  font-weight: bold;
}


/* =============================================================================
   PATCH: SOLO TAMAÑOS (NO TOCA COLORES / FONDOS / BORDES)
   - Cambia el factor acá: 1.00 = como está hoy. 1.33 ≈ pasar de 9px a 12px.
   ============================================================================= */
:root{
  --ui-scale: 1.40;
}

/* Base */
html, body{
  font-size: calc(9px * var(--ui-scale)) !important;
}

/* Menú */
.nav, .nav-wrap, .menubar, .brand, .brand__name, .brand__sub,
.item, .toggle, .submenu, .submenu .item, .submenu .toggle{
  font-size: calc(10px * var(--ui-scale)) !important;
}
.brand__sub{ font-size: calc(7.5px * var(--ui-scale)) !important; }

/* Formularios */
.label{
  font-size: calc(7.5px * var(--ui-scale)) !important;
}
.ui-input, .ui-select, .ui-textarea,
input[type="text"], input[type="number"], input[type="password"], input[type="date"],
input[type="datetime-local"], input[type="time"], select, textarea{
  font-size: calc(8.4px * var(--ui-scale)) !important;
  /* Mantener proporción de altura sin cambiar estilos */
  padding-top: calc(7px * var(--ui-scale)) !important;
  padding-bottom: calc(7px * var(--ui-scale)) !important;
  padding-left: calc(9px * var(--ui-scale)) !important;
  padding-right: calc(9px * var(--ui-scale)) !important;
}

/* Botones (solo tipografía/espaciado; no colores) */
.btn-exacta,
button.btn-exacta,
a.btn-exacta,
input[type="button"].btn-exacta,
input[type="submit"].btn-exacta,
input[type="reset"].btn-exacta,
button, input[type="button"], input[type="submit"]{
  font-size: calc(10px * var(--ui-scale)) !important;
  padding-top: calc(6px * var(--ui-scale)) !important;
  padding-bottom: calc(6px * var(--ui-scale)) !important;
  padding-left: calc(10px * var(--ui-scale)) !important;
  padding-right: calc(10px * var(--ui-scale)) !important;
}

/* Tablas (incluye reglas ultra-específicas que tu CSS usa) */
table{
  font-size: calc(10px * var(--ui-scale)) !important;
}
table th, table td,
body table th, body table td{
  font-size: calc(8px * var(--ui-scale)) !important;
  padding-top: calc(2px * var(--ui-scale)) !important;
  padding-bottom: calc(2px * var(--ui-scale)) !important;
  padding-left: calc(4px * var(--ui-scale)) !important;
  padding-right: calc(4px * var(--ui-scale)) !important;
}

/* Inputs dentro de tablas */
table input, table select, table button,
body table input, body table select, body table button{
  font-size: calc(8px * var(--ui-scale)) !important;
  height: calc(26px * var(--ui-scale)) !important;
}

/* =========================================================
   Unificar estilo de SUBMIT con .btn-exacta
   ========================================================= */

/* input submit hereda exactamente el look de .btn-exacta */
input[type="submit"]{
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 7px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-2);

  background: var(--btn-bg);
  color: #fff;

  font-family: inherit;
  font-size: inherit;
  font-weight: 800;

  cursor: pointer;
  user-select: none;
}

/* Hover */
input[type="submit"]:hover{
  background: var(--btn-bg-hover);
}

/* Focus */
input[type="submit"]:focus-visible{
  outline: none;
  box-shadow: var(--ring);
}

/* Disabled */
input[type="submit"]:disabled{
  opacity: .6;
  cursor: not-allowed;
}