* con un 
.
*
* Al introducir el V4 (SECCIÓN 36) se aplicó padding 12px 16px al
* thead y 8px 16px al tbody, y la SECCIÓN 40 forzó box-sizing:
* border-box + min-width:0. Resultado: una celda de width:20 con
* 32px de padding horizontal deja 0px (negativo) para el contenido,
* y el overflow:hidden inline del PHP clipea el icono.
*
* ESTRUCTURA REAL del DOM (class_datagrid.php línea 589/599):
*
*
* ← envuelve TODO
* 
*
* |
*
* El intento anterior de SECCIÓN 41 usaba selectores como
* .GRID_CELL > a > img
* que NUNCA matchean — el es hijo de , no de .GRID_CELL.
*
* Solución: dos capas.
* 1) Marcador agregado por JS (`stx_grid_columns.js` agrega clase
* `stx-grid-action-cell` al TD si la celda solo contiene un
* img/svg/checkbox pequeño sin texto). Más robusto que :has().
* 2) Selector CSS sin :has() basado en esa clase, override agresivo
* de padding/min-width/overflow inline aplicado por PHP y JS.
* ============================================================ */
/* Body: TD marcado por el JS como celda de acción */
body.main-v2 .GRID_TABLE tbody td.stx-grid-action-cell {
padding: 4px 6px !important;
min-width: 32px !important;
width: 32px !important;
max-width: 64px !important;
text-align: center !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.main-v2 .GRID_TABLE tbody td.stx-grid-action-cell .GRID_CELL {
overflow: visible !important;
min-width: 20px !important;
width: auto !important;
max-width: none !important;
box-sizing: content-box !important;
text-align: center !important;
display: inline-block !important;
}
body.main-v2 .GRID_TABLE tbody td.stx-grid-action-cell .GRID_CELL > nobr,
body.main-v2 .GRID_TABLE tbody td.stx-grid-action-cell .GRID_CELL nobr {
display: inline-block !important;
overflow: visible !important;
line-height: 1 !important;
}
/* Header: TH marcado por el JS como header de columna de acción */
body.main-v2 .GRID_TABLE thead.GRID_HEADER th.stx-grid-action-cell,
body.main-v2 .GRID_TABLE thead.GRID_HEADER td.stx-grid-action-cell {
padding: 8px 6px !important;
min-width: 32px !important;
width: 32px !important;
max-width: 64px !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body.main-v2 .GRID_TABLE thead.GRID_HEADER .stx-grid-action-cell .GRID_TITLE,
body.main-v2 .GRID_TABLE thead.GRID_HEADER .stx-grid-action-cell .GRID_FREEZED_HEADER {
overflow: visible !important;
min-width: 20px !important;
width: auto !important;
max-width: none !important;
}
/* Safety net: dentro de cualquier celda de acción, los IMG/SVG/checkbox
deben renderizarse a tamaño completo sin clipping, ignorando WIDTH/HEIGHT
inline del HTML si son demasiado pequeños. */
body.main-v2 .GRID_TABLE tbody td.stx-grid-action-cell img,
body.main-v2 .GRID_TABLE tbody td.stx-grid-action-cell svg,
body.main-v2 .GRID_TABLE tbody td.stx-grid-action-cell .stx-svg-icon,
body.main-v2 .GRID_TABLE tbody td.stx-grid-action-cell input[type="checkbox"] {
display: inline-block !important;
vertical-align: middle !important;
flex-shrink: 0 !important;
min-width: 14px !important;
min-height: 14px !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Override DEFINITIVO de las reglas de SECCIÓN 36/40 que ponen padding
16px y min-width:0 — esas reglas se aplican antes pero como nuestro
selector es más específico (incluye .stx-grid-action-cell) gana. */
/* ============================================================
* SECCIÓN 41B — Fallback global con :has() para browsers modernos
* ============================================================
* Por si el JS aún no ha corrido (FOUC) o no detectó la celda, usar
* :has() para alcanzar el caso real (DIV.GRID_CELL > NOBR > A > IMG).
* Si el browser no soporta :has() (Safari < 15.4) el JS de la SECCIÓN
* 41 de arriba lo cubre con el marcador stx-grid-action-cell.
* ============================================================ */
body.main-v2 .GRID_TABLE tbody td:has(> .GRID_CELL > nobr > a > img),
body.main-v2 .GRID_TABLE tbody td:has(> .GRID_CELL > nobr > a > svg),
body.main-v2 .GRID_TABLE tbody td:has(> .GRID_CELL > nobr > a > .stx-svg-icon),
body.main-v2 .GRID_TABLE tbody td:has(> .GRID_CELL > nobr > input[type="checkbox"]),
body.main-v2 .GRID_TABLE tbody td:has(> .GRID_CELL > a > img),
body.main-v2 .GRID_TABLE tbody td:has(> .GRID_CELL > a > svg),
body.main-v2 .GRID_TABLE tbody td:has(> .GRID_CELL > input[type="checkbox"]) {
padding: 4px 6px !important;
min-width: 32px !important;
overflow: visible !important;
}
body.main-v2 .GRID_TABLE tbody td:has(> .GRID_CELL > nobr > a > img) .GRID_CELL,
body.main-v2 .GRID_TABLE tbody td:has(> .GRID_CELL > nobr > a > svg) .GRID_CELL,
body.main-v2 .GRID_TABLE tbody td:has(> .GRID_CELL > nobr > a > .stx-svg-icon) .GRID_CELL,
body.main-v2 .GRID_TABLE tbody td:has(> .GRID_CELL > nobr > input[type="checkbox"]) .GRID_CELL,
body.main-v2 .GRID_TABLE tbody td:has(> .GRID_CELL > a > img) .GRID_CELL,
body.main-v2 .GRID_TABLE tbody td:has(> .GRID_CELL > a > svg) .GRID_CELL,
body.main-v2 .GRID_TABLE tbody td:has(> .GRID_CELL > input[type="checkbox"]) .GRID_CELL {
overflow: visible !important;
min-width: 20px !important;
width: auto !important;
box-sizing: content-box !important;
}
/* ============================================================
* SECCIÓN 50 — Login screens (V4)
* ============================================================
* Rediseño visual estilo Stripe Dashboard de las pantallas:
* - system/bin/section/main/login.php
* - system/bin/section/main/login_stx.php
* - system/bin/section/main/login_cliente.php
* - system/bin/section/main/password_reminder.php
* - admin/bin/section/main/login.php
* - admin/bin/section/main/password_reminder.php
*
* Estrategia: cada pantalla envuelve su contenido en
*
* El HTML legacy (FORM_LOGIN, FORM_PASS, FORM_EMAIL, SUBMIT, FIELDSET, etc.)
* se conserva — solo se reestructura visualmente.
*
* No se hardcodean colores: todo viene de las variables de tokens_v4_stripe.css.
* Tipografía heredada Inter (cargada globalmente en top.php).
* ============================================================ */
/* Fondo full-viewport con gradient sutil púrpura/gris cuando la
página contiene un login. Usa :has() (soporte 93%+ browsers actuales). */
body.main-v2:has(.stx-login-page) {
background: linear-gradient(160deg,
var(--stx-gray-50) 0%,
var(--stx-primary-50) 50%,
var(--stx-gray-50) 100%) !important;
min-height: 100vh;
margin: 0;
padding: 0;
}
/* Container general — flexbox para centrar la card vertical y
horizontalmente, full-viewport. */
.stx-login-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100%;
padding: 48px 20px;
box-sizing: border-box;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: -0.005em;
color: var(--text-primary);
}
/* Quitar BR sueltos heredados del HTML legacy. */
.stx-login-page > br {
display: none;
}
/* Logo / branding superior, encima de la card. */
.stx-login-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--stx-gray-900);
}
.stx-login-brand-mark {
width: 44px;
height: 44px;
border-radius: 11px;
background: linear-gradient(135deg,
var(--stx-primary-600) 0%,
var(--stx-primary-700) 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(99, 91, 255, 0.32);
}
.stx-login-brand-mark svg {
width: 24px;
height: 24px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Card principal — fondo blanco, sombra suave, borde sutil. */
.stx-login-card {
width: 100%;
max-width: 420px;
background: var(--bg-elevated);
border: 1px solid var(--border-default);
border-radius: 14px;
box-shadow: var(--shadow-lg);
overflow: hidden;
}
/* Cabecera de card con título y subtítulo. */
.stx-login-card-header {
padding: 32px 32px 8px;
text-align: left;
}
.stx-login-title {
margin: 0 0 6px;
font-size: 22px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--stx-gray-900);
line-height: 1.3;
}
.stx-login-subtitle {
margin: 0;
font-size: 14px;
font-weight: 400;
color: var(--text-tertiary);
line-height: 1.5;
}
/* Cuerpo del card (form). */
.stx-login-card-body {
padding: 24px 32px 28px;
}
/* Banner de errores (top_errors) dentro de la card. */
.stx-login-card-body .ERROR_MESSAGE,
.stx-login-card-body .ERROR_BOX,
.stx-login-card-body .TOP_ERRORS {
background: var(--stx-danger-light);
border: 1px solid var(--stx-danger);
color: var(--stx-danger-dark);
border-radius: 8px;
padding: 10px 14px;
margin-bottom: 16px;
font-size: 13px;
font-weight: 500;
}
/* Grupo de campo (label + input). */
.stx-login-field {
margin-bottom: 16px;
}
.stx-login-field-label {
display: block;
margin: 0 0 6px;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
letter-spacing: -0.005em;
}
/* Inputs del login — sobreescriben .TEXTBOX para esta pantalla. */
.stx-login-card .TEXTBOX,
.stx-login-card input[type="text"],
.stx-login-card input[type="password"],
.stx-login-card input[type="email"] {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
height: 40px !important;
padding: 0 12px !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 400 !important;
color: var(--text-primary) !important;
background: var(--bg-base) !important;
border: 1px solid var(--border-default) !important;
border-radius: 8px !important;
box-shadow: 0 1px 1px rgba(48, 49, 61, 0.04) !important;
transition: border-color 120ms ease, box-shadow 120ms ease !important;
outline: none !important;
}
.stx-login-card .TEXTBOX:hover,
.stx-login-card input[type="text"]:hover,
.stx-login-card input[type="password"]:hover,
.stx-login-card input[type="email"]:hover {
border-color: var(--border-strong) !important;
}
.stx-login-card .TEXTBOX:focus,
.stx-login-card input[type="text"]:focus,
.stx-login-card input[type="password"]:focus,
.stx-login-card input[type="email"]:focus {
border-color: var(--stx-primary-600) !important;
box-shadow: var(--shadow-focus) !important;
}
.stx-login-card .TEXTBOX::placeholder {
color: var(--text-tertiary);
}
/* Acciones del form (botón primary). */
.stx-login-actions {
margin-top: 8px;
}
.stx-login-card .BUTTON_ {
display: block !important;
width: 100% !important;
height: 42px !important;
padding: 0 16px !important;
background: var(--stx-primary-600) !important;
background-image: linear-gradient(180deg,
var(--stx-primary-500) 0%,
var(--stx-primary-600) 100%) !important;
color: #fff !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
box-shadow:
0 1px 2px rgba(48, 49, 61, 0.12),
0 0 0 1px rgba(50, 50, 93, 0.06),
0 2px 5px 0 rgba(50, 50, 93, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
transition: filter 120ms ease, transform 80ms ease, box-shadow 120ms ease !important;
}
.stx-login-card .BUTTON_:hover {
filter: brightness(1.05);
box-shadow:
0 4px 10px rgba(99, 91, 255, 0.28),
0 0 0 1px rgba(50, 50, 93, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.stx-login-card .BUTTON_:active {
transform: translateY(1px);
filter: brightness(0.97);
}
.stx-login-card .BUTTON_:focus-visible {
outline: none;
box-shadow:
var(--shadow-focus),
0 1px 2px rgba(48, 49, 61, 0.12) !important;
}
/* Footer del card — links secundarios. */
.stx-login-card-footer {
border-top: 1px solid var(--border-subtle);
padding: 16px 32px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
font-size: 13px;
background: var(--bg-subtle);
}
.stx-login-card-footer a {
color: var(--text-link);
text-decoration: none;
font-weight: 500;
transition: color 120ms ease;
}
.stx-login-card-footer a:hover {
color: var(--stx-primary-700);
text-decoration: underline;
}
.stx-login-card-footer .stx-login-muted {
color: var(--text-tertiary);
font-weight: 400;
}
/* Pie informativo afuera de la card (copyright / sistema). */
.stx-login-foot {
margin-top: 24px;
font-size: 12px;
color: var(--text-tertiary);
text-align: center;
letter-spacing: -0.005em;
}
/* Mensajes legacy de expiración (slider). Re-estilizar para que
no rompan visualmente la pantalla nueva. */
body.main-v2 .stx-login-page .mensaje {
width: 100%;
max-width: 420px;
margin: 0 auto 16px;
padding: 12px 16px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
line-height: 1.45;
box-sizing: border-box;
}
body.main-v2 .stx-login-page .mensaje p {
margin: 0;
}
body.main-v2 .stx-login-page .mensaje.alerta {
background: var(--stx-warning-light);
border: 1px solid var(--stx-warning);
color: var(--stx-warning-dark);
}
body.main-v2 .stx-login-page .mensaje.suspendido,
body.main-v2 .stx-login-page .mensaje.varios_msg {
background: var(--stx-danger-light);
border: 1px solid var(--stx-danger);
color: var(--stx-danger-dark);
}
/* Slider legacy (.container) — limitar tamaño y darle margen
debajo de la card de login. */
body.main-v2 .stx-login-page .container {
max-width: 420px;
margin: 24px auto 0;
}
/* Esconder elementos legacy decorativos cuando estamos en stx-login-page. */
body.main-v2 .stx-login-page img[src*="login_top"],
body.main-v2 .stx-login-page img[src*="spacer"] {
display: none !important;
}
/* Responsive — móvil. */
@media (max-width: 480px) {
.stx-login-page {
padding: 24px 12px;
}
.stx-login-card-header,
.stx-login-card-body {
padding-left: 22px;
padding-right: 22px;
}
.stx-login-card-footer {
padding-left: 22px;
padding-right: 22px;
}
}
/* ============================================================
* SECCIÓN 51 — Topbar de pestañas (V4)
* ============================================================
*
* Rediseña el topbar legacy (system/bin/section/main/topbar.php y
* admin/bin/section/main/topbar.php) al estilo Stripe Dashboard:
* - tabs fondo blanco / hover gris claro / activa con borde inferior
* púrpura (#635bff) y peso 600
* - X de cerrar pequeña, gris, hover rojo
* - botón "+" como pill discreto con icono Lucide
* - tipografía Inter, padding consistente, sin gradientes ni
* pixel-borders legacy
*
* El body del topbar lleva clase `topbar-v2`. Los selectores acá viven
* todos bajo `body.topbar-v2` para no contaminar otras pantallas
* (el JS replacer y el grid resizer hacen early-return sobre esa misma
* clase). El admin/ topbar también recibe la clase desde su PHP.
*
* Estructura HTML soportada (la pinta el PHP):
*
* body.topbar-v2
* > table.stx-topbar-bar
* td.stx-topbar-logo > img
* td > #CONTENEDOR
* > div#DIV_TAB_N
* > div#TAB_N
* > div.stx-tab (envoltura)
* span.stx-tab-label
* span.stx-tab-close
* td > a.stx-tab-add
* svg (icono plus)
* ============================================================ */
body.topbar-v2 {
background: #ffffff !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
color: var(--gray-700, #425466);
letter-spacing: -0.005em;
margin: 0;
padding: 0;
}
/* Barra principal: quitar gradiente legacy / banner JPG, dejar fondo blanco
* con divider inferior sutil al estilo Stripe.
* El TABLE principal es el segundo del body (el primero es #AJAX_DIV envuelto
* en DIV, no tabla; por seguridad cubrimos ambos selectores). */
body.topbar-v2 > table,
body.topbar-v2 > div + table {
background-image: none !important;
background-color: #ffffff !important;
border-bottom: 1px solid var(--gray-100, #e3e8ee) !important;
box-shadow: 0 1px 0 rgba(10, 37, 64, 0.02);
height: 50px;
border-collapse: collapse;
}
/* Logo */
body.topbar-v2 > div + table td:first-child > div,
body.topbar-v2 > table td:first-child > div {
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 18px;
}
body.topbar-v2 > div + table td:first-child img,
body.topbar-v2 > table td:first-child img {
max-height: 32px;
width: auto;
border: 0;
}
/* Contenedor de tabs alineado al fondo (las tabs "se sientan" sobre el divider) */
body.topbar-v2 #CONTENEDOR {
display: flex;
align-items: flex-end;
height: 100%;
padding-left: 12px !important;
padding-top: 0 !important;
gap: 2px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
body.topbar-v2 #CONTENEDOR::-webkit-scrollbar {
display: none;
}
/* Cada tab vive en un wrapper DIV#DIV_TAB_N > DIV#TAB_N
* El TAB_N tiene float:left inline — lo cancelamos para usar flex en el padre. */
body.topbar-v2 #CONTENEDOR > div {
display: inline-flex;
align-items: flex-end;
}
body.topbar-v2 #CONTENEDOR > div > div {
float: none !important;
display: inline-flex !important;
align-items: flex-end;
}
/* La tabla interna del tab (legacy) la convertimos en flex de una sola fila */
body.topbar-v2 #CONTENEDOR td table,
body.topbar-v2 #CONTENEDOR div table {
border-collapse: collapse;
background: transparent;
}
/* Oculta los GIFs left/right del tab (los cuernos pixelados) */
body.topbar-v2 #CONTENEDOR td > img,
body.topbar-v2 #CONTENEDOR div table td:first-child > img,
body.topbar-v2 #CONTENEDOR div table td:last-child > img {
display: none !important;
}
/* TAB INACTIVO — celda central .MIDDLE */
body.topbar-v2 #CONTENEDOR .MIDDLE,
body.topbar-v2 #CONTENEDOR .MIDDLE_HOVER {
background-image: none !important;
background-color: transparent !important;
padding: 0 !important;
border: 0 !important;
cursor: pointer;
height: auto !important;
line-height: 1 !important;
}
/* Pintar la pill del tab vía el ancla interna para evitar pelearnos
* con los TD/IMG legacy. La estructura real es:
* td.MIDDLE > a (clickable)
* Pintamos el A como pill. */
body.topbar-v2 #CONTENEDOR .MIDDLE a,
body.topbar-v2 #CONTENEDOR .MIDDLE_HOVER a {
display: inline-flex !important;
align-items: center;
gap: 8px;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--gray-500, #697386) !important;
text-decoration: none !important;
padding: 9px 14px 10px !important;
border-radius: 6px 6px 0 0;
border-bottom: 2px solid transparent;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
letter-spacing: -0.005em;
white-space: nowrap;
line-height: 1;
}
/* Hover (tab inactivo) */
body.topbar-v2 #CONTENEDOR .MIDDLE:hover a,
body.topbar-v2 #CONTENEDOR .MIDDLE a:hover {
background-color: var(--gray-50, #f6f9fc) !important;
color: var(--gray-700, #425466) !important;
}
/* Tab activo */
body.topbar-v2 #CONTENEDOR .MIDDLE_HOVER a {
color: var(--gray-900, #0a2540) !important;
font-weight: 600 !important;
border-bottom-color: #635bff !important;
background-color: #ffffff !important;
}
body.topbar-v2 #CONTENEDOR .MIDDLE_HOVER:hover a,
body.topbar-v2 #CONTENEDOR .MIDDLE_HOVER a:hover {
background-color: var(--gray-50, #f6f9fc) !important;
}
/* Botón cerrar (X) — la imagen tab_right*.gif. La reemplazamos por una
* "X" gris pequeña usando mask-image sobre un SVG Lucide.
* En el último TD del tab vive un IMG con onclick = remove_tab. */
body.topbar-v2 #CONTENEDOR div table td:last-child {
padding: 0 !important;
margin: 0 !important;
vertical-align: middle;
}
body.topbar-v2 #CONTENEDOR div table td:last-child > img {
display: inline-block !important;
width: 14px !important;
height: 14px !important;
vertical-align: middle;
margin: 0 8px 0 -4px;
cursor: pointer;
/* Truco: ocultamos el GIF original mostrándolo transparente,
* y dibujamos una "X" Lucide encima vía mask-image. */
background-color: var(--gray-500, #697386);
-webkit-mask: url("data:image/svg+xml;utf8,") center / 12px 12px no-repeat;
mask: url("data:image/svg+xml;utf8,") center / 12px 12px no-repeat;
border-radius: 3px;
transition: background-color 0.15s ease;
opacity: 1;
/* Importante: src del GIF original sigue cargado pero no se ve porque
* el mask sobrescribe el rendering. Si el navegador no soporta mask
* (muy raro hoy), cae al GIF original. */
}
body.topbar-v2 #CONTENEDOR div table td:last-child > img:hover {
background-color: var(--danger, #f04438);
opacity: 1;
}
/* En la pestaña ACTIVA queremos que la X también acompañe el color */
body.topbar-v2 #CONTENEDOR td.MIDDLE_HOVER + td > img {
background-color: var(--gray-700, #425466);
}
/* ============================================
BOTÓN AGREGAR TAB (+)
============================================ */
/* TD que envuelve el "+" en el topbar (último td del table principal).
* Soporta tanto el patrón legacy (IMG GIF) como el nuevo (A.stx-tab-add con SVG). */
body.topbar-v2 > div + table > tbody > tr > td:last-child,
body.topbar-v2 > table > tbody > tr > td:last-child {
padding-right: 14px !important;
vertical-align: middle;
}
/* Anchor que envuelve la imagen + */
body.topbar-v2 > div + table > tbody > tr > td:last-child > a,
body.topbar-v2 > table > tbody > tr > td:last-child > a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 8px;
background-color: var(--gray-50, #f6f9fc);
color: var(--gray-700, #425466);
transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
text-decoration: none;
border: 1px solid var(--gray-100, #e3e8ee);
cursor: pointer;
}
body.topbar-v2 > div + table > tbody > tr > td:last-child > a:hover,
body.topbar-v2 > table > tbody > tr > td:last-child > a:hover {
background-color: #635bff;
color: #ffffff;
border-color: #635bff;
}
body.topbar-v2 > div + table > tbody > tr > td:last-child > a:active,
body.topbar-v2 > table > tbody > tr > td:last-child > a:active {
transform: scale(0.96);
}
/* Si el PHP siguió emitiendo el GIF tab_add.gif (fallback), reescribimos al
* estilo Lucide vía mask-image — mismo truco que con la X. */
body.topbar-v2 > div + table > tbody > tr > td:last-child > a > img,
body.topbar-v2 > table > tbody > tr > td:last-child > a > img {
display: inline-block !important;
width: 18px !important;
height: 18px !important;
border: 0;
margin: 0 !important;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / 16px 16px no-repeat;
mask: url("data:image/svg+xml;utf8,") center / 16px 16px no-repeat;
opacity: 1;
transition: none;
}
/* Si el PHP emitió un SVG inline (camino preferido), darle tamaño correcto */
body.topbar-v2 > div + table > tbody > tr > td:last-child > a > svg,
body.topbar-v2 > table > tbody > tr > td:last-child > a > svg {
width: 18px;
height: 18px;
stroke: currentColor;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 1024px) {
body.topbar-v2 > div + table td:first-child > div,
body.topbar-v2 > table td:first-child > div {
padding-left: 12px;
}
body.topbar-v2 > div + table td:first-child img,
body.topbar-v2 > table td:first-child img {
max-height: 28px;
}
body.topbar-v2 #CONTENEDOR .MIDDLE a,
body.topbar-v2 #CONTENEDOR .MIDDLE_HOVER a {
font-size: 12px !important;
padding: 8px 12px 9px !important;
}
}
@media (max-width: 768px) {
body.topbar-v2 > div + table td:first-child,
body.topbar-v2 > table td:first-child {
width: 0 !important;
max-width: 0 !important;
overflow: hidden;
padding: 0 !important;
}
body.topbar-v2 > div + table td:first-child > div,
body.topbar-v2 > table td:first-child > div {
display: none;
}
body.topbar-v2 #CONTENEDOR {
padding-left: 48px !important; /* espacio para hamburger si lo hubiera */
}
body.topbar-v2 #CONTENEDOR .MIDDLE a,
body.topbar-v2 #CONTENEDOR .MIDDLE_HOVER a {
font-size: 11px !important;
padding: 7px 10px 8px !important;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
}
body.topbar-v2 > div + table > tbody > tr > td:last-child > a,
body.topbar-v2 > table > tbody > tr > td:last-child > a {
width: 28px;
height: 28px;
}
}
/* ============================================================
* SECCIÓN 57 — Tooltips + Error overlay (V4)
* ============================================================
*
* Refuerza el rediseño Stripe Dashboard sobre las clases del
* framework que muestran tooltips al hover y el "error overlay"
* (popup modal de errores).
*
* Clases legacy del framework cubiertas:
*
* Tooltips
* .TOOLTIP — caja flotante del tooltip personalizado
* #TOOLTIP_IMG — flecha (arrow) del tooltip
* #LAYER_TOOLTIP — wrapper absoluto que JS posiciona
* #ARROWHEAD — flecha legacy (css.php / stx legacy)
* [title] — tooltips nativos del browser (no-op a CSS)
*
* Error overlay (utils/stx/css/window/error.css)
* .overlay_error — backdrop modal (oscurecido)
* .error_nw / _n / _ne — esquinas y barra superior (header rojo)
* .error_w / _e — bordes laterales del cuadro
* .error_sw / _s / _se — esquinas y barra inferior
* .error_title — texto del header del overlay
* .error_content — body con el mensaje (scrollable)
* .error_buttons — pie con botones (Aceptar/Cerrar)
* .error_close — botón X para cerrar
*
* Otras clases de mensaje compatibles
* .ERROR_MESSAGE / .ALERT_BOX / .MSG / .OVERLAY_ERROR (uppercase
* legacy si llega a aparecer en algún render server-side).
*
* Convención visual:
* - Tooltip → caja oscura compacta (--stx-gray-700) texto blanco,
* radius 4px, sombra sutil, font-size 11px.
* - Error overlay → header rojo (--stx-danger) con icono SVG inline
* x-circle (Lucide) inyectado vía ::before, animación slide-in
* desde arriba.
* - Toast notifications → posición fixed esquina inferior derecha,
* close button via .error_close, slide-in lateral.
*
* No modifica HTML/JS, solo re-estiliza los selectores existentes.
* ============================================================ */
/* ----- 57.A — Tooltip personalizado (.TOOLTIP / #LAYER_TOOLTIP) --- */
body.main-v2 .TOOLTIP,
.TOOLTIP {
background-color: var(--stx-gray-700, #334155) !important;
background-image: none !important;
color: #ffffff !important;
border: 1px solid var(--stx-gray-800, #1e293b) !important;
border-radius: 4px !important;
-moz-border-radius: 4px !important;
-webkit-border-radius: 4px !important;
padding: 6px 10px !important;
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif) !important;
font-size: 11px !important;
line-height: 1.45 !important;
font-weight: 500 !important;
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.18)) !important;
max-width: 320px !important;
z-index: var(--z-tooltip, 500) !important;
pointer-events: none;
letter-spacing: 0.005em;
animation: stxTooltipIn 120ms ease-out;
}
@keyframes stxTooltipIn {
from { opacity: 0; transform: translateY(2px); }
to { opacity: 1; transform: translateY(0); }
}
/* Flecha del tooltip: oculta GIF, dibuja triángulo oscuro acorde */
body.main-v2 #TOOLTIP_IMG,
#TOOLTIP_IMG {
background-image: none !important;
background-color: transparent !important;
width: 12px !important;
height: 8px !important;
overflow: visible !important;
pointer-events: none;
z-index: var(--z-tooltip, 500) !important;
}
body.main-v2 #TOOLTIP_IMG img,
#TOOLTIP_IMG img {
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
}
body.main-v2 #TOOLTIP_IMG::after,
#TOOLTIP_IMG::after {
content: "" !important;
display: block !important;
width: 0 !important;
height: 0 !important;
border-left: 6px solid transparent !important;
border-right: 6px solid transparent !important;
border-top: 6px solid var(--stx-gray-700, #334155) !important;
border-bottom: none !important;
margin: 0 !important;
position: relative !important;
}
/* Wrapper que JS posiciona; asegurar layering correcto */
#LAYER_TOOLTIP {
z-index: var(--z-tooltip, 500) !important;
pointer-events: none !important;
}
/* Flecha legacy stx (css.php) */
#ARROWHEAD {
z-index: calc(var(--z-tooltip, 500) - 1) !important;
}
/* ----- 57.B — Tooltips por atributo [data-tooltip] (opt-in) ------- */
/* Para nuevos módulos V4 que no quieran depender del JS legacy:
simplemente añadir data-tooltip="texto" al elemento. */
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%) translateY(2px);
background: var(--stx-gray-700, #334155);
color: #ffffff;
padding: 6px 10px;
border-radius: 4px;
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif);
font-size: 11px;
font-weight: 500;
line-height: 1.45;
white-space: nowrap;
box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.18));
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease, transform 120ms ease;
z-index: var(--z-tooltip, 500);
}
[data-tooltip]::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(2px);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid var(--stx-gray-700, #334155);
opacity: 0;
pointer-events: none;
transition: opacity 120ms ease, transform 120ms ease;
z-index: var(--z-tooltip, 500);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
[data-tooltip-disabled]::after,
[data-tooltip-disabled]::before,
[data-tooltip=""]::after,
[data-tooltip=""]::before {
display: none !important;
}
/* ----- 57.C — Error overlay (backdrop + cuadro modal) ------------- */
body.main-v2 .overlay_error,
.overlay_error {
background-color: rgba(10, 37, 64, 0.55) !important;
opacity: 1 !important;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: calc(var(--z-modal, 400) - 1) !important;
}
/* Cuadro principal: header rojo con icono x-circle inline */
body.main-v2 .error_nw,
body.main-v2 .error_n,
body.main-v2 .error_ne,
.error_nw,
.error_n,
.error_ne {
background-image: none !important;
background-color: var(--stx-danger, #ef4444) !important;
height: 44px !important;
}
body.main-v2 .error_nw,
.error_nw {
border-radius: 8px 0 0 0 !important;
-moz-border-radius: 8px 0 0 0 !important;
}
body.main-v2 .error_ne,
.error_ne {
border-radius: 0 8px 0 0 !important;
-moz-border-radius: 0 8px 0 0 !important;
}
/* Título del overlay: blanco, bold, con icono Lucide x-circle */
body.main-v2 .error_title,
.error_title {
color: #ffffff !important;
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
line-height: 44px !important;
height: 44px !important;
padding-left: 44px !important;
text-align: left !important;
position: relative;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
background-color: transparent !important;
}
/* Bordes laterales: discretos */
body.main-v2 .error_w,
body.main-v2 .error_e,
.error_w,
.error_e {
background-image: none !important;
background-color: #ffffff !important;
width: 1px !important;
border-left: 1px solid var(--border-default, #e2e8f0) !important;
}
body.main-v2 .error_e,
.error_e {
border-left: none !important;
border-right: 1px solid var(--border-default, #e2e8f0) !important;
}
/* Cuerpo: padding generoso, tipografía Inter */
body.main-v2 .error_content,
.error_content {
background-color: #ffffff !important;
color: var(--text-primary, #0f172a) !important;
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif) !important;
font-size: 13px !important;
line-height: 1.55 !important;
border: none !important;
padding: 20px 24px !important;
word-wrap: break-word;
word-break: break-word;
overflow: auto !important;
min-height: 80px !important;
max-height: 460px !important;
}
body.main-v2 .error_content table,
.error_content table {
background-color: transparent !important;
border-collapse: collapse !important;
width: 100% !important;
}
body.main-v2 .error_content table td,
.error_content table td {
padding: 6px 4px !important;
vertical-align: top;
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif) !important;
font-size: 13px !important;
color: var(--text-primary, #0f172a) !important;
line-height: 1.55 !important;
}
body.main-v2 .error_content ul,
.error_content ul {
margin: 8px 0 0 0 !important;
padding: 0 0 0 18px !important;
list-style: disc !important;
color: var(--text-secondary, #475569) !important;
}
body.main-v2 .error_content li,
.error_content li {
padding: 2px 0 !important;
font-size: 13px !important;
line-height: 1.55 !important;
}
/* Esquinas inferiores con radio Stripe */
body.main-v2 .error_sw,
.error_sw {
background-image: none !important;
background-color: #ffffff !important;
border-radius: 0 0 0 8px !important;
border-left: 1px solid var(--border-default, #e2e8f0) !important;
border-bottom: 1px solid var(--border-default, #e2e8f0) !important;
height: 8px !important;
}
body.main-v2 .error_s,
.error_s {
background-image: none !important;
background-color: #ffffff !important;
border-bottom: 1px solid var(--border-default, #e2e8f0) !important;
height: 8px !important;
}
body.main-v2 .error_se,
.error_se {
background-image: none !important;
background-color: #ffffff !important;
border-radius: 0 0 8px 0 !important;
border-right: 1px solid var(--border-default, #e2e8f0) !important;
border-bottom: 1px solid var(--border-default, #e2e8f0) !important;
height: 8px !important;
}
/* Pie con botones: alineado a la derecha, separador sutil */
body.main-v2 .error_buttons,
.error_buttons {
background-color: var(--bg-subtle, #f8fafc) !important;
border-top: 1px solid var(--border-default, #e2e8f0) !important;
padding: 12px 16px !important;
text-align: right !important;
}
body.main-v2 .error_buttons input,
.error_buttons input {
background-color: var(--stx-danger, #ef4444) !important;
background-image: none !important;
color: #ffffff !important;
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif) !important;
font-size: 12px !important;
font-weight: 600 !important;
border: 1px solid var(--stx-danger-dark, #b91c1c) !important;
border-radius: var(--radius-sm, 6px) !important;
padding: 7px 14px !important;
min-width: 80px !important;
cursor: pointer !important;
box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.05)) !important;
transition: background-color 120ms ease, transform 80ms ease !important;
}
body.main-v2 .error_buttons input:hover,
.error_buttons input:hover {
background-color: var(--stx-danger-dark, #b91c1c) !important;
}
body.main-v2 .error_buttons input:active,
.error_buttons input:active {
transform: translateY(1px);
}
body.main-v2 .error_buttons input:focus-visible,
.error_buttons input:focus-visible {
outline: none !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}
/* Botón X para cerrar */
body.main-v2 .error_close,
.error_close {
background-color: transparent !important;
background-image: none !important;
color: #ffffff !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
cursor: pointer !important;
position: relative;
top: 6px;
right: 6px;
transition: background-color 120ms ease !important;
}
body.main-v2 .error_close::after,
.error_close::after {
content: "" !important;
display: block !important;
width: 16px !important;
height: 16px !important;
margin: 8px auto !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
body.main-v2 .error_close:hover,
.error_close:hover {
background-color: rgba(255, 255, 255, 0.18) !important;
}
/* Animación slide-in del cuadro modal completo (table padre) */
body.main-v2 .overlay_error + table,
body.main-v2 table.error_w_table,
.overlay_error + table {
animation: stxErrorIn 180ms cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.18)) !important;
border-radius: 8px !important;
overflow: hidden;
}
@keyframes stxErrorIn {
from {
opacity: 0;
transform: translateY(-16px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ----- 57.D — Mensajes y alertas uppercase legacy ---------------- */
/* Clases que el framework puede emitir como alertas inline (no modal) */
body.main-v2 .ERROR_MESSAGE,
body.main-v2 .OVERLAY_ERROR,
.ERROR_MESSAGE,
.OVERLAY_ERROR {
background-color: var(--stx-danger-light, #fef2f2) !important;
color: var(--stx-danger-dark, #b91c1c) !important;
border: 1px solid var(--stx-danger, #ef4444) !important;
border-left: 4px solid var(--stx-danger, #ef4444) !important;
border-radius: var(--radius-sm, 6px) !important;
padding: 12px 16px 12px 44px !important;
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif) !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.55 !important;
margin: 8px 0 !important;
position: relative;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
}
body.main-v2 .ALERT_BOX,
.ALERT_BOX {
background-color: var(--stx-warning-light, #fffbeb) !important;
color: var(--stx-warning-dark, #b45309) !important;
border: 1px solid var(--stx-warning, #f59e0b) !important;
border-left: 4px solid var(--stx-warning, #f59e0b) !important;
border-radius: var(--radius-sm, 6px) !important;
padding: 12px 16px 12px 44px !important;
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif) !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.55 !important;
margin: 8px 0 !important;
position: relative;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
}
body.main-v2 .MSG,
.MSG {
background-color: var(--stx-info-light, #f0f9ff) !important;
color: var(--stx-info-dark, #0369a1) !important;
border: 1px solid var(--stx-info, #0ea5e9) !important;
border-left: 4px solid var(--stx-info, #0ea5e9) !important;
border-radius: var(--radius-sm, 6px) !important;
padding: 12px 16px 12px 44px !important;
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif) !important;
font-size: 13px !important;
line-height: 1.55 !important;
margin: 8px 0 !important;
position: relative;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: 14px center !important;
}
/* ----- 57.E — Toast notifications (esquina inferior derecha) ----- */
/* Para módulos nuevos V4: aplicar clase .stx-toast al contenedor */
.stx-toast {
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
min-width: 280px;
max-width: 380px;
background-color: var(--bg-base, #ffffff);
color: var(--text-primary, #0f172a);
border: 1px solid var(--border-default, #e2e8f0);
border-left: 4px solid var(--stx-primary-600, #2563eb);
border-radius: var(--radius-md, 8px);
padding: 12px 40px 12px 16px;
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif);
font-size: 13px;
line-height: 1.5;
box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.12));
z-index: var(--z-tooltip, 500);
animation: stxToastIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.stx-toast.is-success { border-left-color: var(--stx-success, #22c55e); }
.stx-toast.is-warning { border-left-color: var(--stx-warning, #f59e0b); }
.stx-toast.is-danger { border-left-color: var(--stx-danger, #ef4444); }
.stx-toast.is-info { border-left-color: var(--stx-info, #0ea5e9); }
.stx-toast .stx-toast-close {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
background: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
transition: background-color 120ms ease;
}
.stx-toast .stx-toast-close:hover {
background-color: var(--bg-muted, #f1f5f9);
}
@keyframes stxToastIn {
from { opacity: 0; transform: translateX(24px); }
to { opacity: 1; transform: translateX(0); }
}
/* ============================================================
* SECCIÓN 54 — Formularios de captura de documentos (V4)
* ============================================================
* Refresh visual estilo Stripe Dashboard de los formularios de
* captura de documentos (cabezal + detalle) generados por el
* framework STX. Cubre, principalmente:
*
* - system/bin/section/operacion/documentos/form/form_encabezado.php
* - system/bin/section/operacion/documentos/form/form_detalle.php
* - system/bin/section/operacion/status/form/formulario.php
* - system/bin/section/operacion/status/form/layer_encabezado.php
*
* Estructura HTML legacy que estamos estilizando (intacta):
*
*
* NO modificamos inputs, IDs ni nombres de campos. Solo refrescamos
* bordes/sombras/legends/spacing. Esta sección refuerza con
* `!important` cuando hay reglas previas (sección 8, 24, 26) que
* podrían ganar por especificidad.
* ============================================================ */
/* FIELDSET — card Stripe con sombra suave, radius generoso. */
body.main-v2 fieldset {
border: 1px solid var(--border-default, #e3e8ee) !important;
border-radius: var(--radius-md, 8px) !important;
background: var(--bg-base, #ffffff) !important;
padding: 18px 20px 16px 20px !important;
margin: 0 0 16px 0 !important;
box-shadow: var(--shadow-xs, 0 1px 2px rgba(48,49,61,0.04)) !important;
transition: box-shadow 160ms ease, border-color 160ms ease;
}
/* Hover muy sutil — apenas se nota, pero da sensación táctil. */
body.main-v2 fieldset:hover {
box-shadow: 0 1px 3px rgba(48,49,61,0.06), 0 2px 8px rgba(48,49,61,0.04) !important;
}
/* Fieldset wrapper externo (envoltorio que contiene otros fieldsets):
reducimos su peso visual para no duplicar sombras. */
body.main-v2 fieldset:has(> table[cellpadding] > tbody > tr > td > fieldset),
body.main-v2 fieldset:has(> table[cellpadding] > tr > td > fieldset) {
box-shadow: none !important;
padding: 14px 14px 8px 14px !important;
}
/* LEGEND — título del card, peso 600, neutral oscuro, tipo Inter. */
body.main-v2 fieldset > legend {
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif) !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
color: var(--text-primary, #0a2540) !important;
background: var(--bg-base, #ffffff) !important;
padding: 2px 10px !important;
margin-left: -4px !important;
border-radius: 4px !important;
text-transform: none !important;
}
/* Tabla interna del fieldset — quitar bgcolor blanco y bordes
heredados, dejar respiro vertical entre rows del formulario. */
body.main-v2 fieldset > table[cellpadding] {
border-collapse: separate !important;
border-spacing: 0 !important;
background: transparent !important;
}
/* Rows de captura: cada es un par label+input.
Espaciado vertical generoso entre rows para que respire el form. */
body.main-v2 fieldset tr[id^="CAMPO_"] > td.FORM_TABLE_DARK,
body.main-v2 fieldset tr[id^="CAMPO_"] > td.FORM_TABLE_LIGHT {
padding-top: 8px !important;
padding-bottom: 8px !important;
vertical-align: middle !important;
border: none !important;
background: transparent !important;
}
/* Label (TD izquierdo): peso 500, color secundario, tracking apretado. */
body.main-v2 fieldset tr[id^="CAMPO_"] > td.FORM_TABLE_DARK {
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif) !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--text-secondary, #425466) !important;
letter-spacing: -0.005em !important;
padding-right: 14px !important;
padding-left: 2px !important;
white-space: nowrap;
width: 1%;
}
/* Asterisco de campos obligatorios: rojo Stripe, no negro/legacy. */
body.main-v2 fieldset tr[id^="CAMPO_"] > td.FORM_TABLE_DARK .ERROR,
body.main-v2 fieldset tr[id^="CAMPO_"] > td.FORM_TABLE_DARK font.ERROR {
color: var(--stx-danger, #f04438) !important;
font-weight: 600;
}
/* TD de input — sin background, sin padding extra (lo da el INPUT). */
body.main-v2 fieldset tr[id^="CAMPO_"] > td.FORM_TABLE_LIGHT {
padding-left: 2px !important;
padding-right: 2px !important;
}
/* Divs internos del FORM_TABLE_LIGHT (formulario.php los usa para
separar input + mensajes de error). Quitar background heredado. */
body.main-v2 fieldset tr[id^="CAMPO_"] > td.FORM_TABLE_LIGHT > div {
background: transparent !important;
}
/* INPUTS / SELECTS / TEXTAREA dentro del formulario de captura.
Refuerzo con !important porque hay reglas previas en main_v2 y
en la sección 2 que pueden ganar por especificidad. Mantenemos
tamaño compacto pero respiramos. */
body.main-v2 fieldset tr[id^="CAMPO_"] input.TEXTBOX,
body.main-v2 fieldset tr[id^="CAMPO_"] select.TEXTBOX,
body.main-v2 fieldset tr[id^="CAMPO_"] textarea.TEXTBOX {
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif) !important;
font-size: 12.5px !important;
border: 1px solid var(--border-default, #e3e8ee) !important;
border-radius: var(--radius-sm, 6px) !important;
padding: 6px 10px !important;
background: var(--bg-base, #ffffff) !important;
color: var(--text-primary, #0a2540) !important;
box-shadow: 0 1px 2px rgba(48,49,61,0.04) !important;
transition: border-color 120ms ease, box-shadow 120ms ease !important;
outline: none !important;
}
/* Hover sutil — borde un poco más oscuro. */
body.main-v2 fieldset tr[id^="CAMPO_"] input.TEXTBOX:hover:not(:focus):not([readonly]):not([disabled]),
body.main-v2 fieldset tr[id^="CAMPO_"] select.TEXTBOX:hover:not(:focus):not([disabled]),
body.main-v2 fieldset tr[id^="CAMPO_"] textarea.TEXTBOX:hover:not(:focus):not([readonly]):not([disabled]) {
border-color: var(--border-strong, #c1c9d2) !important;
}
/* Focus — púrpura Stripe con halo translúcido. */
body.main-v2 fieldset tr[id^="CAMPO_"] input.TEXTBOX:focus,
body.main-v2 fieldset tr[id^="CAMPO_"] select.TEXTBOX:focus,
body.main-v2 fieldset tr[id^="CAMPO_"] textarea.TEXTBOX:focus {
border-color: var(--stx-primary-600, #635bff) !important;
box-shadow: 0 0 0 3px rgba(99,91,255,0.15) !important;
}
/* Readonly / disabled — fondo gris-50, texto secundario, no editable. */
body.main-v2 fieldset tr[id^="CAMPO_"] input.TEXTBOX[readonly],
body.main-v2 fieldset tr[id^="CAMPO_"] input.TEXTBOX[disabled],
body.main-v2 fieldset tr[id^="CAMPO_"] select.TEXTBOX[disabled],
body.main-v2 fieldset tr[id^="CAMPO_"] textarea.TEXTBOX[readonly],
body.main-v2 fieldset tr[id^="CAMPO_"] textarea.TEXTBOX[disabled] {
background: var(--bg-subtle, #f6f9fc) !important;
color: var(--text-secondary, #425466) !important;
cursor: not-allowed;
box-shadow: none !important;
}
/* También para selects nativos sin class TEXTBOX dentro del row. */
body.main-v2 fieldset tr[id^="CAMPO_"] select:not(.TEXTBOX):not([class*="sb"]) {
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif) !important;
font-size: 12.5px !important;
border: 1px solid var(--border-default, #e3e8ee) !important;
border-radius: var(--radius-sm, 6px) !important;
padding: 6px 10px !important;
background: var(--bg-base, #ffffff) !important;
color: var(--text-primary, #0a2540) !important;
}
body.main-v2 fieldset tr[id^="CAMPO_"] select:not(.TEXTBOX):not([class*="sb"]):focus {
border-color: var(--stx-primary-600, #635bff) !important;
box-shadow: 0 0 0 3px rgba(99,91,255,0.15) !important;
outline: none !important;
}
/* Checkbox / radio dentro del form de captura — púrpura Stripe. */
body.main-v2 fieldset tr[id^="CAMPO_"] input[type="checkbox"],
body.main-v2 fieldset tr[id^="CAMPO_"] input[type="radio"] {
accent-color: var(--stx-primary-600, #635bff);
width: 14px;
height: 14px;
vertical-align: middle;
}
/* Mensajes de error inline bajo cada campo (los inyecta
Display::errors desde formulario.php). */
body.main-v2 fieldset tr[id^="CAMPO_"] .ERROR,
body.main-v2 fieldset tr[id^="CAMPO_"] .error_message {
font-family: var(--font-sans, 'Inter', 'Segoe UI', sans-serif) !important;
font-size: 11px !important;
color: var(--stx-danger, #f04438) !important;
font-weight: 500;
}
/* Botones flotantes del formulario — respiro vertical cuando viven
dentro de un fieldset de captura. */
body.main-v2 fieldset .BUTTON_OK,
body.main-v2 fieldset .BUTTON_NOK,
body.main-v2 fieldset .BUTTON_ {
margin-top: 4px;
margin-right: 6px;
}
/* Bloque "Detalle" (grid editable). El grid en sí ya está estilizado
por secciones 5 / 28+. Aquí solo damos más respiro horizontal al
fieldset contenedor cuando contiene un GRID_TABLE. */
body.main-v2 fieldset:has(.GRID_TABLE) {
padding: 14px 14px 10px 14px !important;
}
/* Spacer GIF heredado dentro del fieldset (CELLPADDING="10" del HTML
legacy mete 
a veces). Lo aplanamos para que
no rompa la métrica vertical. */
body.main-v2 fieldset img[src*="spacer.gif"] {
height: 1px !important;
vertical-align: middle;
}
/* Responsive — en viewports < 900px stackeamos label arriba del
input (el TD se vuelve block). Solo dentro del form de captura. */
@media (max-width: 900px) {
body.main-v2 fieldset tr[id^="CAMPO_"] > td.FORM_TABLE_DARK,
body.main-v2 fieldset tr[id^="CAMPO_"] > td.FORM_TABLE_LIGHT {
display: block !important;
width: 100% !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
white-space: normal !important;
}
body.main-v2 fieldset tr[id^="CAMPO_"] > td.FORM_TABLE_DARK {
padding-bottom: 2px !important;
padding-right: 0 !important;
}
body.main-v2 fieldset tr[id^="CAMPO_"] input.TEXTBOX,
body.main-v2 fieldset tr[id^="CAMPO_"] select.TEXTBOX,
body.main-v2 fieldset tr[id^="CAMPO_"] textarea.TEXTBOX {
width: 100% !important;
box-sizing: border-box !important;
}
}
/* ============================================================
* SECCIÓN 56 — Datepicker (V4)
* ============================================================
*
* Refina el widget DHTML de Mihai Bazon (utils/stx/js/datepicker/) al
* estilo Stripe Dashboard. La SECCIÓN 15 ya pintaba colores base sobre
* .calendar — esta seccion COMPLEMENTA con !important sin duplicar:
*
* - caja con sombra/borde redondeado mas suave
* - header (mes/año) sin gradiente, navegacion con chevrons SVG
* Lucide (data-URI) en vez de entidades unicode dispares
* - dias de la semana en peso 600 neutral
* - celdas dia: hover suave, hoy con borde purpura, seleccionado
* con fondo purpura, otros meses atenuados
* - tipografia Inter, animacion de entrada (opacity + slide)
*
* Estructura HTML real emitida por datepicker_api.js:
*
* div.calendar
* table
* thead
* tr (toggle, .title mes/año, [x])
* td.button (navtype 100 = toggle "-")
* td.title
* td.button (navtype 200 = close "x", solo popup)
* tr.headrow (« ‹ TODAY › »)
* td.button × 5
* tr.daynames
* td.name.wn (opcional, semana)
* td.name × 7
* tbody
* tr.daysrow × 6
* td.day.wn (opcional)
* td.day (+ .today / .selected / .weekend / .othermonth
* / .oweekend / .hilite / .active / .disabled)
* tfoot
* tr.footrow
* td.ttip
* div.combo (menu mes / año)
* div.label (+ .hilite / .active)
*
* Para los chevrons, se oculta el caracter unicode original con
* font-size:0 + color:transparent y se inyecta el SVG via
* background-image data-URI. Los 5 botones de .headrow se identifican
* por nth-of-type bajo td.button.
* ============================================================ */
/* --- Caja exterior ------------------------------------------- */
div.calendar,
.calendar {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 12px !important;
color: var(--text-primary, #0a2540) !important;
background: #ffffff !important;
border: 1px solid var(--border-default, #e3e8ee) !important;
border-radius: 10px !important;
box-shadow: 0 12px 24px rgba(48, 49, 61, 0.10),
0 4px 8px rgba(48, 49, 61, 0.06),
0 0 0 1px rgba(10, 37, 64, 0.02) !important;
overflow: hidden !important;
padding: 4px !important;
animation: stxCalEnter 140ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
backdrop-filter: none !important;
}
@keyframes stxCalEnter {
from {
opacity: 0;
transform: translateY(-4px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.calendar table {
border: 0 !important;
border-collapse: separate !important;
border-spacing: 2px !important;
background: transparent !important;
font-family: inherit !important;
color: inherit !important;
cursor: default !important;
}
/* --- Header: titulo (mes / año) ----------------------------- */
.calendar thead tr {
background: transparent !important;
}
.calendar thead .title {
background: transparent !important;
color: var(--text-primary, #0a2540) !important;
font-weight: 600 !important;
font-size: 13px !important;
letter-spacing: -0.01em !important;
padding: 10px 4px 8px !important;
text-align: center !important;
border-radius: 6px !important;
transition: background-color 120ms ease !important;
}
.calendar thead .title:hover {
background: var(--stx-gray-100, #f3f6fa) !important;
cursor: pointer !important;
}
/* Toggle (boton "-" navtype 100) y close "x" (navtype 200):
* primera y, si aplica, ultima TD de la primera fila del thead.
* Las pintamos pequenas y discretas, en gris. */
.calendar thead > tr:first-child > td.button {
background: transparent !important;
color: var(--text-tertiary, #697386) !important;
font-weight: 500 !important;
font-size: 13px !important;
line-height: 1 !important;
padding: 6px !important;
border-radius: 6px !important;
transition: background-color 120ms ease, color 120ms ease !important;
}
.calendar thead > tr:first-child > td.button:hover,
.calendar thead > tr:first-child > td.button.hilite {
background: var(--stx-gray-100, #f3f6fa) !important;
color: var(--text-primary, #0a2540) !important;
}
/* --- Header: navegacion (« ‹ TODAY › ») --------------------- */
.calendar thead tr.headrow {
background: transparent !important;
}
.calendar thead tr.headrow td.button {
background: transparent !important;
color: var(--text-secondary, #425466) !important;
font-weight: 500 !important;
font-size: 12px !important;
line-height: 1 !important;
padding: 8px 4px !important;
border-radius: 6px !important;
text-align: center !important;
vertical-align: middle !important;
transition: background-color 120ms ease, color 120ms ease !important;
}
.calendar thead tr.headrow td.button:hover,
.calendar thead tr.headrow td.button.hilite {
background: var(--stx-gray-100, #f3f6fa) !important;
color: var(--stx-primary-600, #635bff) !important;
}
.calendar thead tr.headrow td.button.active {
background: var(--stx-primary-50, #efeefe) !important;
color: var(--stx-primary-700, #5147e2) !important;
}
/* Chevrons Lucide para los 4 botones de navegacion (1, 2, 4, 5).
* El 3ro es el texto "TODAY" / "HOY" — ese si queda como label.
* El font-size:0 esconde el caracter unicode legacy («, ‹, ›, »)
* y el SVG data-URI llega via background-image. */
.calendar thead tr.headrow td.button:nth-of-type(1),
.calendar thead tr.headrow td.button:nth-of-type(2),
.calendar thead tr.headrow td.button:nth-of-type(4),
.calendar thead tr.headrow td.button:nth-of-type(5) {
font-size: 0 !important;
color: transparent !important;
width: 28px !important;
min-width: 28px !important;
height: 28px !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 16px 16px !important;
}
/* « PREV_YEAR (chevrons-left Lucide) */
.calendar thead tr.headrow td.button:nth-of-type(1) {
background-image: url("data:image/svg+xml;utf8,") !important;
}
.calendar thead tr.headrow td.button:nth-of-type(1):hover {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* ‹ PREV_MONTH (chevron-left Lucide) */
.calendar thead tr.headrow td.button:nth-of-type(2) {
background-image: url("data:image/svg+xml;utf8,") !important;
}
.calendar thead tr.headrow td.button:nth-of-type(2):hover {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* › NEXT_MONTH (chevron-right Lucide) */
.calendar thead tr.headrow td.button:nth-of-type(4) {
background-image: url("data:image/svg+xml;utf8,") !important;
}
.calendar thead tr.headrow td.button:nth-of-type(4):hover {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* » NEXT_YEAR (chevrons-right Lucide) */
.calendar thead tr.headrow td.button:nth-of-type(5) {
background-image: url("data:image/svg+xml;utf8,") !important;
}
.calendar thead tr.headrow td.button:nth-of-type(5):hover {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* "HOY" / "TODAY" — el 3er TD queda como pill discreto */
.calendar thead tr.headrow td.button:nth-of-type(3) {
font-weight: 600 !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
color: var(--stx-primary-600, #635bff) !important;
padding: 8px 10px !important;
}
.calendar thead tr.headrow td.button:nth-of-type(3):hover {
background: var(--stx-primary-50, #efeefe) !important;
color: var(--stx-primary-700, #5147e2) !important;
}
/* --- Dias de la semana -------------------------------------- */
.calendar thead tr.daynames {
background: transparent !important;
}
.calendar thead tr.daynames td,
.calendar thead .name {
background: transparent !important;
color: var(--text-tertiary, #697386) !important;
font-weight: 600 !important;
font-size: 10.5px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
text-align: center !important;
padding: 8px 0 6px !important;
border-bottom: 1px solid var(--border-subtle, #f3f6fa) !important;
}
.calendar thead .name.wn {
color: var(--text-disabled, #c1c9d2) !important;
border-right: 1px solid var(--border-subtle, #f3f6fa) !important;
}
.calendar thead .weekend {
color: var(--text-tertiary, #697386) !important;
}
/* --- Celdas del body (dias) --------------------------------- */
.calendar tbody tr.daysrow {
background: transparent !important;
}
.calendar tbody .day {
font-family: inherit !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--text-primary, #0a2540) !important;
text-align: center !important;
width: 32px !important;
height: 30px !important;
padding: 0 !important;
border: 1px solid transparent !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: background-color 100ms ease,
color 100ms ease,
border-color 100ms ease !important;
}
/* Numero de semana */
.calendar tbody .day.wn,
.calendar table .wn {
background: transparent !important;
color: var(--text-disabled, #c1c9d2) !important;
font-weight: 600 !important;
font-size: 10px !important;
cursor: default !important;
border-right: 1px solid var(--border-subtle, #f3f6fa) !important;
border-radius: 0 !important;
}
/* Hover suave */
.calendar tbody td.day.hilite {
background: var(--stx-gray-100, #f3f6fa) !important;
color: var(--text-primary, #0a2540) !important;
border-color: transparent !important;
}
/* Dia actual (HOY) — borde purpura, fondo claro */
.calendar tbody td.day.today {
color: var(--stx-primary-700, #5147e2) !important;
background: #ffffff !important;
border: 1px solid var(--stx-primary-600, #635bff) !important;
font-weight: 700 !important;
}
.calendar tbody td.day.today.hilite {
background: var(--stx-primary-50, #efeefe) !important;
}
/* Dia seleccionado — fondo purpura, blanco */
.calendar tbody td.day.selected {
background: var(--stx-primary-600, #635bff) !important;
color: #ffffff !important;
border: 1px solid var(--stx-primary-600, #635bff) !important;
font-weight: 600 !important;
box-shadow: 0 1px 3px rgba(99, 91, 255, 0.35) !important;
}
.calendar tbody td.day.selected.hilite {
background: var(--stx-primary-700, #5147e2) !important;
border-color: var(--stx-primary-700, #5147e2) !important;
}
/* Hoy + seleccionado: gana el seleccionado */
.calendar tbody td.day.today.selected {
background: var(--stx-primary-600, #635bff) !important;
color: #ffffff !important;
}
/* Active (mouse abajo) */
.calendar tbody td.day.active {
transform: scale(0.94) !important;
background: var(--stx-primary-100, #dedcfd) !important;
color: var(--stx-primary-700, #5147e2) !important;
}
/* Otros meses (mes anterior / siguiente) */
.calendar tbody td.day.othermonth {
color: var(--text-disabled, #c1c9d2) !important;
font-weight: 400 !important;
font-size: 11px !important;
}
.calendar tbody td.day.othermonth.hilite {
color: var(--text-tertiary, #697386) !important;
}
.calendar tbody td.day.othermonth.oweekend {
color: #fca5a5 !important;
}
/* Fines de semana */
.calendar tbody td.day.weekend {
color: var(--text-secondary, #425466) !important;
}
/* Disabled */
.calendar tbody td.day.disabled {
color: var(--text-disabled, #c1c9d2) !important;
cursor: not-allowed !important;
background: transparent !important;
}
.calendar tbody td.day.disabled.hilite {
background: transparent !important;
color: var(--text-disabled, #c1c9d2) !important;
}
/* Celdas vacias / filas vacias */
.calendar tbody .emptycell {
visibility: hidden !important;
}
.calendar tbody .emptyrow {
display: none !important;
}
/* Row hover (cuando se navega por fila completa) */
.calendar tbody tr.rowhilite td.day:not(.selected):not(.today) {
background: var(--stx-gray-50, #f6f9fc) !important;
}
/* --- Footer (tooltip / status) ------------------------------ */
.calendar tfoot tr.footrow {
background: var(--bg-subtle, #f6f9fc) !important;
color: var(--text-secondary, #425466) !important;
}
.calendar tfoot .ttip {
background: var(--bg-subtle, #f6f9fc) !important;
color: var(--text-secondary, #425466) !important;
font-size: 11px !important;
font-weight: 500 !important;
text-align: center !important;
padding: 8px 10px !important;
border-top: 1px solid var(--border-subtle, #f3f6fa) !important;
border-radius: 0 0 6px 6px !important;
}
.calendar tfoot .hilite {
background: var(--stx-primary-50, #efeefe) !important;
color: var(--stx-primary-700, #5147e2) !important;
border: 0 !important;
}
.calendar tfoot .active {
background: var(--stx-primary-600, #635bff) !important;
color: #ffffff !important;
}
/* --- Combo (selector de mes / año desplegable) -------------- */
.calendar .combo {
background: #ffffff !important;
border: 1px solid var(--border-default, #e3e8ee) !important;
border-radius: 8px !important;
box-shadow: 0 8px 16px rgba(48, 49, 61, 0.10),
0 2px 4px rgba(48, 49, 61, 0.06) !important;
padding: 4px !important;
font-family: inherit !important;
font-size: 11.5px !important;
color: var(--text-primary, #0a2540) !important;
width: 5em !important;
overflow: hidden !important;
animation: stxCalEnter 120ms ease-out both !important;
}
.calendar .combo .label,
.calendar .combo .label-IEfix {
background: transparent !important;
color: var(--text-secondary, #425466) !important;
text-align: center !important;
padding: 5px 4px !important;
border-radius: 4px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: background-color 100ms ease, color 100ms ease !important;
}
.calendar .combo .hilite {
background: var(--stx-gray-100, #f3f6fa) !important;
color: var(--stx-primary-700, #5147e2) !important;
}
.calendar .combo .active {
background: var(--stx-primary-600, #635bff) !important;
color: #ffffff !important;
font-weight: 600 !important;
}
/* --- Time picker (cuando esta habilitado) ------------------- */
.calendar td.time {
background: var(--bg-subtle, #f6f9fc) !important;
border-top: 1px solid var(--border-subtle, #f3f6fa) !important;
padding: 6px 0 !important;
text-align: center !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--text-primary, #0a2540) !important;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
background: #ffffff !important;
border: 1px solid var(--border-default, #e3e8ee) !important;
border-radius: 4px !important;
padding: 3px 8px !important;
font-weight: 600 !important;
color: var(--text-primary, #0a2540) !important;
font-family: 'SF Mono', Menlo, Consolas, monospace !important;
}
.calendar td.time .colon {
padding: 0 4px !important;
color: var(--text-tertiary, #697386) !important;
font-weight: 600 !important;
}
.calendar td.time span.hilite {
background: var(--stx-gray-100, #f3f6fa) !important;
color: var(--stx-primary-700, #5147e2) !important;
border-color: var(--stx-primary-200, #c3befb) !important;
}
.calendar td.time span.active {
background: var(--stx-primary-600, #635bff) !important;
color: #ffffff !important;
border-color: var(--stx-primary-600, #635bff) !important;
}
/* --- Asegurar que no se vea el GIF legacy de fondo --------- */
.calendar,
.calendar table,
.calendar thead .button,
.calendar thead .title,
.calendar thead .name,
.calendar thead .weekend,
.calendar thead .daynames,
.calendar .nav div,
.calendar tbody .wn,
.calendar tfoot .ttip,
.calendar td.time,
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm,
.calendar td.time span.hilite,
.calendar td.time span.active,
.calendar .combo,
.calendar .combo .hilite,
.calendar .combo .active {
background-image: none !important;
}
/* ============================================================
* SECCIÓN 52 — Modal dialogs / popups / alertas (V4)
* ============================================================
*
* Refresca visualmente los modales del framework prototype-window que
* NO están cubiertos por la SECCIÓN 57 (que solo trata error_* y
* tooltips). Cubre los temas restantes:
*
* utils/stx/js/window.js -> clase Window + Dialog.alert/confirm/info
* utils/stx/css/window/default.css -> .dialog_* / .overlay_dialog
* utils/stx/css/window/notice.css -> .notice_* / .overlay_notice (Success)
* utils/stx/css/window/warning.css -> .warning_* / .overlay_warning
* utils/stx/css/window/bitacora.css -> .bitacora_* / .overlay_bitacora
* Dialog.alert/confirm/info genéricos -> className "alert" por defecto
*
* Cada tema legacy define un set fractal de clases con el patrón
* _nw, _n, _ne, _w, _e, _sw, _s, _se, _close, _minimize, _maximize,
* _title, _content, _window, _message, _buttons, _progress, _wired_frame.
* El JS prototype-window las arma con strings concatenados
* (className + "_n", etc.) — NO se puede cambiar el HTML sin tocar
* window.js, por eso el rediseño es 100% CSS: pintamos sobre cada
* combinación.
*
* Reglas visuales V4:
* - Borde redondeado 12px en el contenedor (.dialog)
* - Sombra grande (--shadow-xl) + borde 1px gris-200
* - Encabezado con fondo según severidad
* (primary / success / warning / gray-900)
* - Contenido sobre fondo blanco, padding generoso 20-24px
* - Tipografía Inter, peso 600 título, 400 body
* - Botones con estilo Stripe (primary púrpura / cancelar ghost gris)
* - Overlay translúcido azul oscuro (#0a2540 / 45% opacity)
* - Esquinas/bordes GIF legacy se neutralizan (background-image:none)
*
* NOTAS:
* - .error_* NO se incluye aquí — vive ya en SECCIÓN 12 + SECCIÓN 57.
* - Esta sección REFUERZA la SECCIÓN 11 (dialog default parcial) y
* es complementaria a la 57 (que cubre error + tooltips).
* ============================================================ */
/* ---------- Overlay translúcido común a temas restantes ----------
.overlay_error ya lo cubre SECCIÓN 57; aquí incluimos los demás. */
body.main-v2 .overlay_dialog,
body.main-v2 .overlay_notice,
body.main-v2 .overlay_warning,
body.main-v2 .overlay_bitacora,
body.main-v2 .overlay_alert,
body.main-v2 .overlay_modal,
body.main-v2 .overlay_lightbox {
background-color: #0a2540 !important;
opacity: 0.45 !important;
-moz-opacity: 0.45 !important;
filter: alpha(opacity=45) !important;
backdrop-filter: saturate(120%) blur(2px);
-webkit-backdrop-filter: saturate(120%) blur(2px);
transition: opacity 0.18s ease-out;
}
/* ---------- Contenedor table.table_window ---------- */
body.main-v2 .dialog {
box-shadow: var(--shadow-xl, 0 20px 40px rgba(10,37,64,0.18), 0 8px 16px rgba(10,37,64,0.08)) !important;
border-radius: 12px !important;
overflow: hidden !important;
background-color: #ffffff !important;
border: 1px solid var(--stx-gray-200, #e3e8ee) !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body.main-v2 .dialog table.table_window {
border-collapse: separate !important;
border-spacing: 0 !important;
background-color: #ffffff !important;
}
/* ---------- Header (clase _n del tema) ---------- */
body.main-v2 .dialog_n,
body.main-v2 .notice_n,
body.main-v2 .warning_n,
body.main-v2 .bitacora_n,
body.main-v2 .alert_n {
background-image: none !important;
height: 44px !important;
padding: 0 16px !important;
position: relative;
}
/* Esquinas del header neutralizadas y pintadas */
body.main-v2 .dialog_nw,
body.main-v2 .dialog_ne,
body.main-v2 .notice_nw,
body.main-v2 .notice_ne,
body.main-v2 .warning_nw,
body.main-v2 .warning_ne,
body.main-v2 .bitacora_nw,
body.main-v2 .bitacora_ne,
body.main-v2 .alert_nw,
body.main-v2 .alert_ne {
background-image: none !important;
width: 0 !important;
height: 44px !important;
}
/* Pintura del header por tema */
body.main-v2 .dialog_n,
body.main-v2 .dialog_nw,
body.main-v2 .dialog_ne {
background-color: var(--stx-primary-600, #635bff) !important;
}
body.main-v2 .notice_n,
body.main-v2 .notice_nw,
body.main-v2 .notice_ne {
background-color: var(--stx-success, #16b364) !important;
}
body.main-v2 .warning_n,
body.main-v2 .warning_nw,
body.main-v2 .warning_ne {
background-color: var(--stx-warning, #f79009) !important;
}
body.main-v2 .bitacora_n,
body.main-v2 .bitacora_nw,
body.main-v2 .bitacora_ne {
background-color: var(--stx-gray-900, #0a2540) !important;
}
body.main-v2 .alert_n,
body.main-v2 .alert_nw,
body.main-v2 .alert_ne {
background-color: var(--stx-primary-600, #635bff) !important;
}
/* ---------- Título del header ---------- */
body.main-v2 .dialog_title,
body.main-v2 .notice_title,
body.main-v2 .warning_title,
body.main-v2 .bitacora_title,
body.main-v2 .alert_title {
color: #ffffff !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
line-height: 44px !important;
height: auto !important;
margin: 0 !important;
text-align: left !important;
padding-left: 4px !important;
text-shadow: none !important;
}
/* ---------- Bordes laterales y pie: neutralizar GIFs legacy ---------- */
body.main-v2 .dialog_e,
body.main-v2 .dialog_w,
body.main-v2 .notice_e,
body.main-v2 .notice_w,
body.main-v2 .warning_e,
body.main-v2 .warning_w,
body.main-v2 .bitacora_e,
body.main-v2 .bitacora_w,
body.main-v2 .alert_e,
body.main-v2 .alert_w {
background-image: none !important;
background-color: #ffffff !important;
width: 0 !important;
}
body.main-v2 .dialog_s,
body.main-v2 .dialog_sw,
body.main-v2 .dialog_se,
body.main-v2 .notice_s,
body.main-v2 .notice_sw,
body.main-v2 .notice_se,
body.main-v2 .warning_s,
body.main-v2 .warning_sw,
body.main-v2 .warning_se,
body.main-v2 .bitacora_s,
body.main-v2 .bitacora_sw,
body.main-v2 .bitacora_se,
body.main-v2 .alert_s,
body.main-v2 .alert_sw,
body.main-v2 .alert_se {
background-image: none !important;
background-color: #ffffff !important;
height: 0 !important;
width: 0 !important;
}
/* Resizer SE: conservar cursor pero quitar el gif */
body.main-v2 .dialog_sizer,
body.main-v2 .notice_sizer,
body.main-v2 .warning_sizer,
body.main-v2 .bitacora_sizer,
body.main-v2 .alert_sizer {
background-image: none !important;
background-color: transparent !important;
width: 12px !important;
height: 12px !important;
cursor: se-resize !important;
opacity: 0.4;
}
/* ---------- NOTICE (success) refinado V4.1 ----------
El NOTICE_WINDOW de errors.js NO lleva titulo (el title div es ):
la banda verde de 44px se veia como una barra rota sin texto (reporte
12-jun, catalogo de clientes). Se sustituye por un acento delgado de
exito y se neutraliza el contenido legacy (tabla inline #DFFBDF). */
body.main-v2 .notice_n,
body.main-v2 .notice_nw,
body.main-v2 .notice_ne {
height: 8px !important;
min-height: 8px !important;
padding: 0 !important;
}
body.main-v2 .notice_title {
display: none !important;
}
body.main-v2 .notice_close {
top: 14px !important;
right: 12px !important;
z-index: 5;
}
body.main-v2 .notice_content {
height: auto !important;
min-height: 44px;
padding: 14px 18px !important;
box-sizing: border-box;
}
/* Tabla legacy inline del mensaje (bgcolor #DFFBDF + cellspacing) */
body.main-v2 .notice_content table {
background-color: transparent !important;
border-spacing: 0 !important;
border-collapse: collapse !important;
}
body.main-v2 .notice_content table td {
padding: 0 8px 0 0 !important;
vertical-align: middle !important;
}
body.main-v2 .notice_content ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.main-v2 .notice_content li {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 13.5px !important;
font-weight: 500 !important;
line-height: 1.5 !important;
color: var(--stx-gray-900, #1a1f36) !important;
padding: 2px 0 !important;
}
body.main-v2 .notice_content li b {
font-weight: 700 !important;
}
/* ---------- Botón cerrar (X) ---------- */
body.main-v2 .dialog_close,
body.main-v2 .notice_close,
body.main-v2 .warning_close,
body.main-v2 .bitacora_close,
body.main-v2 .alert_close {
background-image: none !important;
background-color: rgba(255,255,255,0.85) !important;
width: 24px !important;
height: 24px !important;
top: 10px !important;
right: 12px !important;
left: auto !important;
border-radius: 6px !important;
cursor: pointer !important;
z-index: 2000 !important;
transition: background-color 0.15s ease-out, transform 0.15s ease-out;
/* Glifo X dibujado con un mask SVG inline (Lucide x) */
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 14px 14px;
mask-size: 14px 14px;
}
body.main-v2 .dialog_close:hover,
body.main-v2 .notice_close:hover,
body.main-v2 .warning_close:hover,
body.main-v2 .bitacora_close:hover,
body.main-v2 .alert_close:hover {
background-color: #ffffff !important;
transform: scale(1.08);
}
body.main-v2 .dialog_close:active,
body.main-v2 .notice_close:active,
body.main-v2 .warning_close:active,
body.main-v2 .bitacora_close:active,
body.main-v2 .alert_close:active {
transform: scale(0.94);
}
/* NOTICE V4.1: el header ahora es un acento de 8px, asi que la X cae sobre
fondo blanco — el glifo (mask sobre background-color) debe ser gris para
ser visible, no blanco-sobre-blanco. Va DESPUES del bloque generico para
ganar el cascade. */
body.main-v2 .notice_close {
background-color: var(--stx-gray-500, #697386) !important;
top: 16px !important;
}
body.main-v2 .notice_close:hover {
background-color: var(--stx-gray-900, #1a1f36) !important;
}
/* ---------- Minimize / Maximize: ocultar (UI moderna) ---------- */
body.main-v2 .dialog_minimize,
body.main-v2 .dialog_maximize,
body.main-v2 .notice_minimize,
body.main-v2 .notice_maximize,
body.main-v2 .warning_minimize,
body.main-v2 .warning_maximize,
body.main-v2 .bitacora_minimize,
body.main-v2 .bitacora_maximize,
body.main-v2 .alert_minimize,
body.main-v2 .alert_maximize {
display: none !important;
}
/* ---------- Content (cuerpo del modal) ---------- */
body.main-v2 .dialog_content,
body.main-v2 .notice_content,
body.main-v2 .warning_content,
body.main-v2 .bitacora_content,
body.main-v2 .alert_content {
background-image: none !important;
background-color: #ffffff !important;
color: var(--text-primary, #0a2540) !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 14px !important;
line-height: 1.55 !important;
letter-spacing: -0.005em !important;
padding: 20px 24px !important;
border: none !important;
}
/* ---------- Caja interna ._window (Dialog.alert/confirm) ---------- */
body.main-v2 .dialog_window,
body.main-v2 .notice_window,
body.main-v2 .warning_window,
body.main-v2 .bitacora_window,
body.main-v2 .alert_window {
background-color: #ffffff !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 auto !important;
width: auto !important;
max-width: 100%;
}
/* ---------- Mensaje (._message) ---------- */
body.main-v2 .dialog_message,
body.main-v2 .notice_message,
body.main-v2 .warning_message,
body.main-v2 .bitacora_message,
body.main-v2 .alert_message,
body.main-v2 #modal_dialog_message {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.55 !important;
color: var(--text-primary, #0a2540) !important;
text-align: left !important;
padding: 4px 0 20px 0 !important;
width: 100% !important;
background: transparent !important;
}
/* ---------- Bloque de botones ---------- */
body.main-v2 .dialog_buttons,
body.main-v2 .notice_buttons,
body.main-v2 .warning_buttons,
body.main-v2 .bitacora_buttons,
body.main-v2 .alert_buttons {
text-align: right !important;
width: 100% !important;
padding-top: 12px !important;
border-top: 1px solid var(--stx-gray-200, #e3e8ee) !important;
display: flex !important;
justify-content: flex-end !important;
gap: 10px !important;
}
body.main-v2 .dialog_buttons input,
body.main-v2 .notice_buttons input,
body.main-v2 .warning_buttons input,
body.main-v2 .bitacora_buttons input,
body.main-v2 .alert_buttons input,
body.main-v2 .dialog_buttons button,
body.main-v2 .notice_buttons button,
body.main-v2 .warning_buttons button,
body.main-v2 .bitacora_buttons button,
body.main-v2 .alert_buttons button {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
padding: 8px 16px !important;
border-radius: 6px !important;
border: 1px solid transparent !important;
cursor: pointer !important;
transition: background-color 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.05s ease-out;
min-width: 88px !important;
width: auto !important;
margin: 0 !important;
background-color: var(--stx-primary-600, #635bff) !important;
color: #ffffff !important;
box-shadow: var(--shadow-xs, 0 1px 2px rgba(48,49,61,0.08));
}
body.main-v2 .dialog_buttons input:hover,
body.main-v2 .notice_buttons input:hover,
body.main-v2 .warning_buttons input:hover,
body.main-v2 .bitacora_buttons input:hover,
body.main-v2 .alert_buttons input:hover,
body.main-v2 .dialog_buttons button:hover,
body.main-v2 .notice_buttons button:hover,
body.main-v2 .warning_buttons button:hover,
body.main-v2 .bitacora_buttons button:hover,
body.main-v2 .alert_buttons button:hover {
background-color: var(--stx-primary-700, #5147e2) !important;
box-shadow: var(--shadow-sm, 0 1px 3px rgba(48,49,61,0.1));
}
body.main-v2 .dialog_buttons input:active,
body.main-v2 .notice_buttons input:active,
body.main-v2 .warning_buttons input:active,
body.main-v2 .bitacora_buttons input:active,
body.main-v2 .alert_buttons input:active {
transform: translateY(1px);
}
/* Segundo botón (Cancelar) en confirm: estilo "ghost" gris.
Dialog.confirm renderiza dos seguidos. */
body.main-v2 .dialog_buttons input + input,
body.main-v2 .notice_buttons input + input,
body.main-v2 .warning_buttons input + input,
body.main-v2 .bitacora_buttons input + input,
body.main-v2 .alert_buttons input + input,
body.main-v2 .dialog_buttons input.cancel,
body.main-v2 .notice_buttons input.cancel,
body.main-v2 .warning_buttons input.cancel,
body.main-v2 .bitacora_buttons input.cancel,
body.main-v2 .alert_buttons input.cancel {
background-color: #ffffff !important;
color: var(--text-primary, #0a2540) !important;
border: 1px solid var(--stx-gray-200, #e3e8ee) !important;
box-shadow: var(--shadow-xs, 0 1px 2px rgba(48,49,61,0.04));
}
body.main-v2 .dialog_buttons input + input:hover,
body.main-v2 .notice_buttons input + input:hover,
body.main-v2 .warning_buttons input + input:hover,
body.main-v2 .bitacora_buttons input + input:hover,
body.main-v2 .alert_buttons input + input:hover,
body.main-v2 .dialog_buttons input.cancel:hover,
body.main-v2 .notice_buttons input.cancel:hover,
body.main-v2 .warning_buttons input.cancel:hover,
body.main-v2 .bitacora_buttons input.cancel:hover,
body.main-v2 .alert_buttons input.cancel:hover {
background-color: var(--stx-gray-50, #f6f9fc) !important;
border-color: var(--stx-gray-300, #c1c9d2) !important;
}
/* Variantes por severidad para el botón OK */
body.main-v2 .warning_buttons input:first-child,
body.main-v2 .warning_buttons button:first-child {
background-color: var(--stx-warning, #f79009) !important;
}
body.main-v2 .warning_buttons input:first-child:hover,
body.main-v2 .warning_buttons button:first-child:hover {
background-color: var(--stx-warning-dark, #b54708) !important;
}
body.main-v2 .notice_buttons input:first-child,
body.main-v2 .notice_buttons button:first-child {
background-color: var(--stx-success, #16b364) !important;
}
body.main-v2 .notice_buttons input:first-child:hover,
body.main-v2 .notice_buttons button:first-child:hover {
background-color: var(--stx-success-dark, #027a48) !important;
}
/* ---------- Progress bar interna ---------- */
body.main-v2 .dialog_progress,
body.main-v2 .notice_progress,
body.main-v2 .warning_progress,
body.main-v2 .bitacora_progress,
body.main-v2 .alert_progress,
body.main-v2 #modal_dialog_progress {
background-image: none !important;
background-color: var(--stx-gray-100, #f3f6fa) !important;
border-radius: 999px !important;
height: 6px !important;
overflow: hidden !important;
position: relative;
margin: 8px 0 !important;
}
body.main-v2 .dialog_progress::after,
body.main-v2 .notice_progress::after,
body.main-v2 .warning_progress::after,
body.main-v2 .bitacora_progress::after,
body.main-v2 .alert_progress::after,
body.main-v2 #modal_dialog_progress::after {
content: "";
position: absolute;
inset: 0;
width: 40%;
background-color: var(--stx-primary-600, #635bff);
border-radius: 999px;
animation: stx-modal-progress-slide 1.4s infinite ease-in-out;
}
@keyframes stx-modal-progress-slide {
0% { transform: translateX(-100%); }
50% { transform: translateX(150%); }
100% { transform: translateX(250%); }
}
/* ---------- Wired frame (drag fantasma) ---------- */
body.main-v2 .wired_frame,
body.main-v2 .dialog_wired_frame,
body.main-v2 .notice_wired_frame,
body.main-v2 .warning_wired_frame,
body.main-v2 .bitacora_wired_frame,
body.main-v2 .alert_wired_frame {
border: 2px dashed var(--stx-primary-400, #8276f2) !important;
background-color: rgba(99, 91, 255, 0.08) !important;
border-radius: 10px !important;
opacity: 1 !important;
}
/* ---------- Top draggable cursor: feedback claro ---------- */
body.main-v2 .top_draggable,
body.main-v2 .bottom_draggable {
cursor: move !important;
}
/* ---------- Inputs/Selects dentro del modal: estilo V4 ---------- */
body.main-v2 .dialog_content input[type="text"],
body.main-v2 .dialog_content input[type="number"],
body.main-v2 .dialog_content input[type="password"],
body.main-v2 .dialog_content input[type="email"],
body.main-v2 .dialog_content select,
body.main-v2 .dialog_content textarea,
body.main-v2 .notice_content input[type="text"],
body.main-v2 .notice_content select,
body.main-v2 .notice_content textarea,
body.main-v2 .warning_content input[type="text"],
body.main-v2 .warning_content select,
body.main-v2 .warning_content textarea,
body.main-v2 .bitacora_content input[type="text"],
body.main-v2 .bitacora_content select,
body.main-v2 .bitacora_content textarea {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 13px !important;
padding: 7px 10px !important;
border: 1px solid var(--stx-gray-200, #e3e8ee) !important;
border-radius: 6px !important;
background-color: #ffffff !important;
color: var(--text-primary, #0a2540) !important;
box-shadow: var(--shadow-xs, 0 1px 2px rgba(48,49,61,0.04));
transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}
body.main-v2 .dialog_content input[type="text"]:focus,
body.main-v2 .dialog_content select:focus,
body.main-v2 .dialog_content textarea:focus,
body.main-v2 .notice_content input[type="text"]:focus,
body.main-v2 .warning_content input[type="text"]:focus,
body.main-v2 .bitacora_content input[type="text"]:focus {
outline: none !important;
border-color: var(--stx-primary-500, #6c5dff) !important;
box-shadow: var(--shadow-focus, 0 0 0 3px rgba(99,91,255,0.15)) !important;
}
/* ---------- iframe interno (Dialog.confirm con URL) ---------- */
body.main-v2 .dialog_content > iframe,
body.main-v2 .notice_content > iframe,
body.main-v2 .warning_content > iframe,
body.main-v2 .bitacora_content > iframe {
border: none !important;
background: #ffffff !important;
border-radius: 0 !important;
}
/* ---------- Status bar (footer del Window legacy) ---------- */
body.main-v2 .status_bar,
body.main-v2 .status_bar input {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-size: 12px !important;
color: var(--text-tertiary, #697386) !important;
}
/* ---------- Responsive: en móvil el modal ocupa casi todo el viewport ---------- */
@media (max-width: 600px) {
body.main-v2 .dialog {
border-radius: 10px !important;
max-width: 92vw !important;
}
body.main-v2 .dialog_content,
body.main-v2 .notice_content,
body.main-v2 .warning_content,
body.main-v2 .bitacora_content,
body.main-v2 .alert_content {
padding: 16px !important;
font-size: 13px !important;
}
body.main-v2 .dialog_buttons,
body.main-v2 .notice_buttons,
body.main-v2 .warning_buttons,
body.main-v2 .bitacora_buttons,
body.main-v2 .alert_buttons {
flex-wrap: wrap;
justify-content: stretch;
}
body.main-v2 .dialog_buttons input,
body.main-v2 .notice_buttons input,
body.main-v2 .warning_buttons input,
body.main-v2 .bitacora_buttons input,
body.main-v2 .alert_buttons input {
flex: 1 1 auto !important;
min-width: 0 !important;
}
}
/* ============================================================
* SECCIÓN 55 — Reportes renderizados (V4)
* ============================================================
* Estiliza el HTML emitido por el XSL de reportes
* (system/include/lib/xsl/reportes/html/base_report.xsl) sin
* tocar el XSL más allá de inyectar Inter + tokens + theme V4 y
* marcar el con class="stx-report-render".
*
* Clases legacy que se renderizan desde grid_base.xsl /
* header_base.xsl y a las que aplica esta sección:
* div#header.base - encabezado del reporte
* div#header.base h1 / h2 - título y subtítulo
* div#header.base ul / li - lista de filtros usados
* table.grid_base - tabla principal
* table.grid_base td.headers - headers de columna
* table.grid_base td.summary - fila de totales
* table.grid_base td.summary span.item - cada item del summary
* table.grid_base td.contenedor_detalle - celda contenedora de subgrid
* table.grid_base_detalle - tabla detalle (nested)
* table.grid_base_detalle td.headers - headers de detalle
*
* Reglas con scope estricto vía body.stx-report-render para NO
* contaminar el panel de listado de reportes (ya rediseñado en
* SECCIÓN 36) ni cualquier otra vista del ERP.
* ============================================================ */
/* Reset suave de body cuando es un reporte renderizado */
body.stx-report-render {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
'Helvetica Neue', Arial, sans-serif !important;
font-size: 13px !important;
color: var(--text-primary, #0a2540) !important;
background-color: var(--bg-base, #ffffff) !important;
letter-spacing: -0.005em !important;
margin: 0 !important;
padding: 24px !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============================================================
* 55.1 — Encabezado del reporte (div#header.base)
* ============================================================ */
body.stx-report-render div#header.base,
body.stx-report-render #header.base {
background: var(--bg-base, #ffffff) !important;
background-image: none !important;
border: 1px solid var(--border-default, #e3e8ee) !important;
border-left: 3px solid var(--stx-primary-600, #635bff) !important;
border-radius: 8px !important;
padding: 18px 22px !important;
margin: 0 0 20px 0 !important;
box-shadow: var(--shadow-xs, 0 1px 2px rgba(48,49,61,0.04)) !important;
color: var(--text-primary, #0a2540) !important;
}
body.stx-report-render div#header.base img,
body.stx-report-render #header.base img {
max-height: 38px !important;
width: auto !important;
margin: 0 0 12px 0 !important;
display: block !important;
filter: none !important;
}
body.stx-report-render div#header.base h1,
body.stx-report-render #header.base h1 {
font-family: 'Inter', sans-serif !important;
font-size: 18px !important;
font-weight: 700 !important;
color: var(--text-primary, #0a2540) !important;
margin: 0 0 4px 0 !important;
padding: 0 !important;
letter-spacing: -0.02em !important;
line-height: 1.25 !important;
}
body.stx-report-render div#header.base h2,
body.stx-report-render #header.base h2 {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
color: var(--text-tertiary, #697386) !important;
margin: 14px 0 6px 0 !important;
padding: 0 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
body.stx-report-render div#header.base ul,
body.stx-report-render #header.base ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 6px 10px !important;
}
body.stx-report-render div#header.base ul li,
body.stx-report-render #header.base ul li {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 400 !important;
color: var(--text-secondary, #425466) !important;
list-style: none !important;
background: var(--bg-subtle, #f6f9fc) !important;
border: 1px solid var(--border-default, #e3e8ee) !important;
border-radius: 6px !important;
padding: 4px 10px !important;
margin: 0 !important;
line-height: 1.4 !important;
}
body.stx-report-render div#header.base ul li b,
body.stx-report-render #header.base ul li b {
font-weight: 600 !important;
color: var(--text-primary, #0a2540) !important;
margin-right: 4px !important;
}
/* ============================================================
* 55.2 — Tabla principal (grid_base)
* ============================================================ */
body.stx-report-render table.grid_base {
border: 1px solid var(--border-default, #e3e8ee) !important;
border-radius: 8px !important;
border-collapse: separate !important;
border-spacing: 0 !important;
background: var(--bg-base, #ffffff) !important;
box-shadow: var(--shadow-xs, 0 1px 2px rgba(48,49,61,0.04)) !important;
overflow: hidden !important;
margin: 0 0 16px 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 12.5px !important;
}
body.stx-report-render table.grid_base td {
padding: 7px 10px !important;
border-left: none !important;
border-bottom: 1px solid var(--border-subtle, #f3f6fa) !important;
color: var(--text-secondary, #425466) !important;
font-family: 'Inter', sans-serif !important;
font-size: 12.5px !important;
line-height: 1.4 !important;
background-color: var(--bg-base, #ffffff) !important;
vertical-align: middle !important;
}
/* Celdas numéricas: tipografía monospace + tabular */
body.stx-report-render table.grid_base td[align="right"],
body.stx-report-render table.grid_base td[ALIGN="right"],
body.stx-report-render table.grid_base td[align="RIGHT"] {
font-family: 'JetBrains Mono', 'SFMono-Regular', 'Menlo', monospace !important;
font-variant-numeric: tabular-nums !important;
font-size: 12px !important;
color: var(--text-primary, #0a2540) !important;
}
/* Header de columna */
body.stx-report-render table.grid_base td.headers {
background-color: var(--bg-subtle, #f6f9fc) !important;
background-image: none !important;
color: var(--text-secondary, #425466) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
border-left: none !important;
border-bottom: 1px solid var(--border-default, #e3e8ee) !important;
padding: 10px 10px !important;
text-align: left !important;
white-space: nowrap !important;
}
/* Hover de fila (preservar headers/summary/contenedor intactos) */
body.stx-report-render table.grid_base tr:hover td:not(.headers):not(.summary):not(.contenedor_detalle) {
background-color: var(--bg-subtle, #f6f9fc) !important;
}
/* Fila de totales / summary */
body.stx-report-render table.grid_base td.summary {
background-color: var(--bg-subtle, #f6f9fc) !important;
background-image: none !important;
color: var(--text-primary, #0a2540) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 12.5px !important;
padding: 12px 10px !important;
border-top: 2px solid var(--border-default, #e3e8ee) !important;
border-bottom: none !important;
}
body.stx-report-render table.grid_base td.summary span.item {
display: inline-block !important;
float: none !important;
padding: 4px 10px !important;
margin: 2px 8px 2px 0 !important;
background-color: var(--bg-base, #ffffff) !important;
border: 1px solid var(--border-default, #e3e8ee) !important;
border-radius: 6px !important;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--text-primary, #0a2540) !important;
transition: background-color 120ms ease, border-color 120ms ease !important;
}
body.stx-report-render table.grid_base td.summary span.item:hover {
background-color: var(--stx-primary-50, #efeefe) !important;
border-color: var(--stx-primary-200, #c3befb) !important;
}
/* ============================================================
* 55.3 — Contenedor de detalle (sub-grid nested)
* ============================================================ */
body.stx-report-render table.grid_base td.contenedor_detalle {
padding: 8px 12px !important;
background-color: var(--bg-sunken, #f3f6fa) !important;
background-image: none !important;
border-bottom: 1px solid var(--border-default, #e3e8ee) !important;
}
/* ============================================================
* 55.4 — Tabla detalle (grid_base_detalle)
* ============================================================ */
body.stx-report-render table.grid_base_detalle {
border: 1px solid var(--border-default, #e3e8ee) !important;
border-radius: 6px !important;
border-collapse: separate !important;
border-spacing: 0 !important;
background: var(--bg-base, #ffffff) !important;
width: 100% !important;
float: none !important;
margin: 4px 0 !important;
overflow: hidden !important;
box-shadow: var(--shadow-xs, 0 1px 2px rgba(48,49,61,0.04)) !important;
}
body.stx-report-render table.grid_base_detalle td {
padding: 6px 10px !important;
border-left: none !important;
border-bottom: 1px solid var(--border-subtle, #f3f6fa) !important;
background-color: var(--bg-base, #ffffff) !important;
color: var(--text-secondary, #425466) !important;
font-family: 'Inter', sans-serif !important;
font-size: 11.5px !important;
line-height: 1.4 !important;
}
body.stx-report-render table.grid_base_detalle td.headers {
background-color: var(--bg-subtle, #f6f9fc) !important;
background-image: none !important;
color: var(--text-tertiary, #697386) !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 10.5px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
border-bottom: 1px solid var(--border-default, #e3e8ee) !important;
padding: 8px 10px !important;
}
/* Celdas numéricas del detalle */
body.stx-report-render table.grid_base_detalle td[align="right"],
body.stx-report-render table.grid_base_detalle td[ALIGN="right"],
body.stx-report-render table.grid_base_detalle td[align="RIGHT"] {
font-family: 'JetBrains Mono', 'SFMono-Regular', 'Menlo', monospace !important;
font-variant-numeric: tabular-nums !important;
font-size: 11px !important;
color: var(--text-primary, #0a2540) !important;
}
body.stx-report-render table.grid_base_detalle tr:hover td:not(.headers) {
background-color: var(--bg-subtle, #f6f9fc) !important;
}
/* ============================================================
* 55.5 — Print + viewport pequeño
* ============================================================ */
@media print {
body.stx-report-render {
padding: 0 !important;
background: #ffffff !important;
}
body.stx-report-render div#header.base,
body.stx-report-render #header.base {
box-shadow: none !important;
page-break-after: avoid !important;
}
body.stx-report-render table.grid_base,
body.stx-report-render table.grid_base_detalle {
box-shadow: none !important;
page-break-inside: auto !important;
}
body.stx-report-render table.grid_base tr,
body.stx-report-render table.grid_base_detalle tr {
page-break-inside: avoid !important;
}
}
@media (max-width: 720px) {
body.stx-report-render {
padding: 12px !important;
}
body.stx-report-render div#header.base,
body.stx-report-render #header.base {
padding: 14px 16px !important;
}
body.stx-report-render div#header.base h1,
body.stx-report-render #header.base h1 {
font-size: 16px !important;
}
body.stx-report-render table.grid_base td,
body.stx-report-render table.grid_base_detalle td {
padding: 6px 8px !important;
font-size: 11.5px !important;
}
}
/* ============================================================
* SECCIÓN 53 — PDV layout principal (V4)
* ============================================================
* Rediseño visual estilo Stripe Dashboard de la pantalla principal
* del Punto de Venta (pdv.php) y sus capas (layer_unticket.php,
* layer_unafactura.php, layer_*).
*
* IMPORTANTE: El body del PDV lleva clase `pdv-popup` (además de
* `main-v2`). El JS replacer ignora esta pantalla a propósito para
* NO inyectar el global toolbar, pero los selectores CSS deben
* aplicar igualmente. Por eso aquí usamos `body.pdv-popup ...` y
* selectores genéricos sin `body.main-v2`.
*
* Ámbito:
* - .pdv-shell / .pdv-card / .pdv-divider-row / .pdv-action-bar-cell
* .pdv-action-bar-gap / .pdv-logo-cell — wrappers V4 del layout
* - .LAYER_TABS / .OFF_MIDDLE_PDV / .ON_MIDDLE_PDV — pestañas tic/fact
* - .LAYER_DOCUMENTO_MAIN / .LAYER_TOOLS — capas principal y lateral
* - .GRID_HEADER_PDV / .GRID_TITLE_PDV / .ODD_ROW_PDV / .EVEN_ROW_PDV
* - .SUBTOTALES / .TOTALES — totales del documento
* - .BUTTON_ADD_FDP / .BUTTON_GUARDAR / .BUTTON_GUARDAR_IMPRIMIR
* .BUTTON_CONTINUAR_CAMPOS_EXTRAS / .BUTTON_CANCELAR_CAMPOS_EXTRAS
* - .PDV_DYNAMIC_LIST_HEADER/OVER/OUT_A/OUT_B — autocomplete dropdown
*
* NO toca .pdv-action-icon / .pdv-side-icon / .pdv-side-label /
* .pdv-action-label (ya definidas en SECCIÓN 38). Aquí se les añade
* un override con namespace body.pdv-popup para que apliquen incluso
* cuando el JS ignora esta pantalla.
* ============================================================ */
body.pdv-popup {
background-color: var(--bg-subtle, #f6f9fc) !important;
font-family: 'Inter', sans-serif !important;
letter-spacing: -0.005em;
color: var(--text-primary, #0a2540);
}
.pdv-shell {
background-color: var(--bg-subtle, #f6f9fc) !important;
}
body.pdv-popup .pdv-card {
background-color: var(--bg-base, #ffffff);
border: 1px solid var(--border-default, #e3e8ee);
border-radius: 12px;
box-shadow: var(--shadow-md, 0 4px 8px rgba(48,49,61,0.06));
overflow: hidden;
margin: 8px auto;
width: 825px;
}
body.pdv-popup .pdv-card > table {
background-color: transparent !important;
}
body.pdv-popup .pdv-divider-row {
background-color: var(--border-default, #e3e8ee) !important;
height: 1px;
line-height: 1px;
font-size: 0;
}
body.pdv-popup .pdv-action-bar-gap {
background-color: transparent !important;
}
body.pdv-popup .pdv-logo-cell {
border: 1px solid var(--border-default, #e3e8ee) !important;
border-radius: 10px;
background-color: var(--bg-base, #ffffff);
overflow: hidden;
}
/* Pestañas (cabecera) — barra Stripe purpura con tabs blancos */
body.pdv-popup .LAYER_TABS {
background-color: var(--stx-primary-600, #635bff) !important;
background-image: linear-gradient(180deg, var(--stx-primary-600, #635bff), var(--stx-primary-700, #5147e2));
height: 32px !important;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
body.pdv-popup .OFF_MIDDLE_PDV,
body.pdv-popup .ON_MIDDLE_PDV {
background-image: none !important;
background-color: transparent !important;
padding: 6px 14px !important;
cursor: pointer;
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
font-weight: 500 !important;
color: rgba(255,255,255,0.80) !important;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
transition: background-color 120ms ease, color 120ms ease;
border: none;
}
body.pdv-popup .OFF_MIDDLE_PDV:hover {
background-color: rgba(255,255,255,0.08) !important;
color: #ffffff !important;
}
body.pdv-popup .ON_MIDDLE_PDV {
background-color: var(--bg-base, #ffffff) !important;
color: var(--text-primary, #0a2540) !important;
font-weight: 600 !important;
}
body.pdv-popup .LAYER_DOCUMENTO_MAIN {
background-color: var(--bg-base, #ffffff) !important;
border: 1px solid var(--border-default, #e3e8ee);
border-top: none;
border-radius: 0 0 8px 8px;
}
body.pdv-popup .LAYER_TOOLS {
background-color: var(--bg-subtle, #f6f9fc) !important;
border: 1px solid var(--border-default, #e3e8ee) !important;
border-radius: 8px;
}
/* Grid PDV: cabecera neutra Stripe + filas alternadas + hover */
body.pdv-popup .GRID_HEADER_PDV {
background-color: var(--gray-50, #f6f9fc) !important;
border-bottom: 1px solid var(--border-default, #e3e8ee) !important;
height: auto !important;
}
body.pdv-popup .GRID_HEADER_PDV th,
body.pdv-popup .GRID_HEADER_PDV td {
background-color: var(--gray-50, #f6f9fc) !important;
padding: 8px 10px !important;
}
body.pdv-popup .GRID_TITLE_PDV {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
color: var(--gray-700, #425466) !important;
text-transform: uppercase;
letter-spacing: 0.04em;
text-align: left;
padding: 4px 0 !important;
}
body.pdv-popup .ODD_ROW_PDV {
background-color: var(--bg-base, #ffffff) !important;
}
body.pdv-popup .EVEN_ROW_PDV {
background-color: var(--bg-subtle, #f6f9fc) !important;
}
body.pdv-popup .ODD_ROW_PDV:hover,
body.pdv-popup .EVEN_ROW_PDV:hover {
background-color: var(--stx-primary-50, #efeefe) !important;
}
body.pdv-popup .ODD_ROW_PDV td,
body.pdv-popup .EVEN_ROW_PDV td {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
color: var(--text-primary, #0a2540) !important;
border-bottom: 1px solid var(--border-subtle, #f3f6fa) !important;
}
/* Totales */
body.pdv-popup .SUBTOTALES {
color: var(--gray-700, #425466) !important;
font-family: 'Inter', sans-serif !important;
font-size: 14px !important;
font-weight: 500 !important;
letter-spacing: -0.01em;
}
body.pdv-popup .TOTALES {
color: var(--stx-primary-700, #5147e2) !important;
font-family: 'Inter', sans-serif !important;
font-size: 24px !important;
font-weight: 700 !important;
letter-spacing: -0.02em;
}
/* Action bar superior (Ticket / Factura / Devolucion / Caja / ...) */
body.pdv-popup .pdv-action-bar-cell {
padding: 6px 8px !important;
border: 1px solid var(--border-default, #e3e8ee) !important;
border-radius: 10px;
background-color: var(--bg-base, #ffffff);
}
body.pdv-popup .pdv-action-bar .ICON.pdv-action-icon,
body.pdv-popup .pdv-action-bar .ICON.pdv-action-icon.stx-icon-tile-host {
min-width: 0 !important;
max-width: none !important;
flex: 1 1 0 !important;
padding: 6px 4px !important;
margin: 0 !important;
gap: 4px !important;
height: 72px !important;
border-radius: 10px !important;
font-family: 'Inter', sans-serif !important;
background-color: var(--bg-base, #ffffff);
border: 1px solid transparent;
transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}
body.pdv-popup .pdv-action-bar .ICON.pdv-action-icon:hover {
background-color: var(--gray-50, #f6f9fc);
border-color: var(--border-default, #e3e8ee);
transform: translateY(-1px);
}
body.pdv-popup .pdv-action-bar .ICON.pdv-action-icon .stx-icon-tile {
width: 32px !important;
height: 32px !important;
border-radius: 8px !important;
}
body.pdv-popup .pdv-action-bar .ICON.pdv-action-icon .stx-icon-tile .stx-svg-icon {
width: 18px !important;
height: 18px !important;
}
body.pdv-popup .pdv-action-bar .pdv-action-label {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 500 !important;
color: var(--gray-700, #425466) !important;
line-height: 1.15;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* Fallback: si el JS replacer aún no corrió, encoge el IMG GIF grande */
body.pdv-popup .pdv-action-bar .ICON.pdv-action-icon > img {
max-width: 28px;
max-height: 28px;
display: block;
margin: 0 auto;
}
/* Botones grandes (FDP / Guardar / Continuar / Cancelar) — sin sprite GIF */
body.pdv-popup .BUTTON_ADD_FDP,
body.pdv-popup .BUTTON_GUARDAR,
body.pdv-popup .BUTTON_GUARDAR_IMPRIMIR,
body.pdv-popup .BUTTON_CONTINUAR_CAMPOS_EXTRAS,
body.pdv-popup .BUTTON_CANCELAR_CAMPOS_EXTRAS {
background-image: none !important;
background-color: var(--stx-primary-600, #635bff) !important;
color: #ffffff !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: -0.005em !important;
text-decoration: none !important;
border: 1px solid var(--stx-primary-700, #5147e2) !important;
border-radius: 8px !important;
height: auto !important;
min-height: 36px !important;
padding: 8px 16px !important;
cursor: pointer;
transition: background-color 120ms ease, transform 100ms ease, box-shadow 120ms ease;
box-shadow: var(--shadow-xs, 0 1px 2px rgba(48,49,61,0.04));
width: auto !important;
}
body.pdv-popup .BUTTON_ADD_FDP:hover,
body.pdv-popup .BUTTON_GUARDAR:hover,
body.pdv-popup .BUTTON_GUARDAR_IMPRIMIR:hover,
body.pdv-popup .BUTTON_CONTINUAR_CAMPOS_EXTRAS:hover,
body.pdv-popup .BUTTON_CANCELAR_CAMPOS_EXTRAS:hover {
background-color: var(--stx-primary-700, #5147e2) !important;
box-shadow: var(--shadow-sm, 0 1px 3px rgba(48,49,61,0.06));
}
body.pdv-popup .BUTTON_ADD_FDP:active,
body.pdv-popup .BUTTON_GUARDAR:active,
body.pdv-popup .BUTTON_GUARDAR_IMPRIMIR:active,
body.pdv-popup .BUTTON_CONTINUAR_CAMPOS_EXTRAS:active,
body.pdv-popup .BUTTON_CANCELAR_CAMPOS_EXTRAS:active {
transform: scale(0.985);
}
/* Guardar (sin imprimir) en Success verde */
body.pdv-popup .BUTTON_GUARDAR {
background-color: var(--stx-success, #16b364) !important;
border-color: var(--stx-success-dark, #027a48) !important;
}
body.pdv-popup .BUTTON_GUARDAR:hover {
background-color: var(--stx-success-dark, #027a48) !important;
}
/* Cancelar campos extras en Danger outline */
body.pdv-popup .BUTTON_CANCELAR_CAMPOS_EXTRAS {
background-color: var(--bg-base, #ffffff) !important;
color: var(--stx-danger, #f04438) !important;
border-color: var(--stx-danger, #f04438) !important;
}
body.pdv-popup .BUTTON_CANCELAR_CAMPOS_EXTRAS:hover {
background-color: var(--stx-danger-light, #fef3f2) !important;
}
/* Autocomplete dropdown (lista dinámica de productos / clientes) */
body.pdv-popup .PDV_DYNAMIC_LIST_HEADER {
font-family: 'Inter', sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
color: var(--gray-700, #425466) !important;
background-color: var(--gray-50, #f6f9fc) !important;
padding: 6px 10px !important;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 18px !important;
border-bottom: 1px solid var(--border-default, #e3e8ee);
cursor: default;
white-space: nowrap;
}
body.pdv-popup .PDV_DYNAMIC_LIST_OVER {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
color: var(--text-primary, #0a2540) !important;
background-color: var(--stx-primary-50, #efeefe) !important;
cursor: pointer;
line-height: 20px !important;
padding: 4px 10px;
white-space: nowrap;
}
body.pdv-popup .PDV_DYNAMIC_LIST_OUT_A,
body.pdv-popup .PDV_DYNAMIC_LIST_OUT_B {
font-family: 'Inter', sans-serif !important;
font-size: 12px !important;
color: var(--text-primary, #0a2540) !important;
line-height: 20px !important;
padding: 4px 10px;
white-space: nowrap;
cursor: pointer;
}
body.pdv-popup .PDV_DYNAMIC_LIST_OUT_A {
background-color: var(--bg-subtle, #f6f9fc) !important;
}
body.pdv-popup .PDV_DYNAMIC_LIST_OUT_B {
background-color: var(--bg-base, #ffffff) !important;
}
/* Limpieza de Verdana/Tahoma residual: forzar Inter en todo el PDV */
body.pdv-popup table,
body.pdv-popup td,
body.pdv-popup div,
body.pdv-popup span,
body.pdv-popup input,
body.pdv-popup select,
body.pdv-popup textarea,
body.pdv-popup button {
font-family: 'Inter', sans-serif;
}
body.pdv-popup font[face],
body.pdv-popup FONT[FACE] {
font-family: 'Inter', sans-serif !important;
}
/* ============================================================
* SECCIÓN 58 — Cleanup final V4 (selects, botones, inputs, fix mojibake)
* ============================================================
*
* Después de las secciones 50-57 quedaban elementos sueltos que aún se
* veían "legacy" en pantallas que no son paneles ni listados — formularios
* de captura de reportes, formularios de configuración, popups simples.
*
* Esta sección normaliza:
*
* -