@import url('geomat-grid.css');
@import url('geomat-dialog.css');

/* ══════════════════════════════════════════════════════════════════════════════
   GEOMAT Design Tokens — fuente oficial: Documentacion/geomat_design_guide.html
   Definidos en :root para que TODOS los módulos resuelvan var(--geo-*) / var(--font-*).
   (Sin esto, los componentes que usan var(--geo-*) se ven planos/sin color.)
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
    --geo-primary:       #0D3D26;
    --geo-primary-dark:  #082A19;
    --geo-accent:        #4AAD6B;
    --geo-accent-light:  #D7EBDD;
    --geo-bg:            #F7F9F7;
    --geo-surface:       #FFFFFF;
    --geo-border:        #E5E9E5;
    --geo-text:          #1A2419;
    --geo-text-muted:    #6B7470;
    --geo-warn:          #B8761A;
    --geo-warn-bg:       #FBF2E0;
    --geo-danger:        #A82A2A;
    --geo-danger-bg:     #FBE9E9;
    --geo-info:          #1F5A82;
    --geo-info-bg:       #E4EEF5;
    --geo-purple:        #5C2A82;
    --geo-purple-bg:     #F0E6F5;

    --font-ui:      'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'Geist Mono', 'Cascadia Code', Consolas, monospace;
    --font-display: 'Fraunces', Georgia, serif;

    --geo-focus-ring: 0 0 0 3px rgba(74,173,107,0.15);
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GEOMAT Design System — prefijo gu-  (global, disponible en todos los módulos)
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Page header ──────────────────────────────────────────────────────────── */
.gu-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 28px 32px 20px;
    background: #ffffff;
    border-bottom: 1px solid #E5E9E5;
}
.gu-page-header__info {
    display: flex; flex-direction: column; gap: 4px;
    outline: none;
}
.gu-page-title {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Geist', -apple-system, sans-serif;
    font-size: 21px; font-weight: 600; color: #1A2419; margin: 0; line-height: 1.2;
}

/* Chevron indica que hay más info al pasar el mouse / enfocar con teclado */
.gu-page-title__chevron {
    width: 14px; height: 14px; flex-shrink: 0;
    color: #6B7470;
    transition: transform 0.25s ease, color 0.25s ease;
}
.gu-page-header__info:hover .gu-page-title__chevron,
.gu-page-header__info:focus-within .gu-page-title__chevron {
    transform: rotate(180deg);
    color: #4AAD6B;
}

/* Wrapper colapsable — grid-template-rows anima una altura fluida (0 → contenido) */
.gu-page-header__info-wrap {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    transition: grid-template-rows 0.25s ease-out, margin-top 0.25s ease-out;
}
.gu-page-header__info:hover .gu-page-header__info-wrap,
.gu-page-header__info:focus-within .gu-page-header__info-wrap {
    grid-template-rows: 1fr;
    margin-top: 4px;
}
.gu-page-subtitle {
    overflow: hidden;
    min-height: 0;
    font-family: 'Geist', -apple-system, sans-serif;
    font-size: 13px; color: #6B7470; margin: 0;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.gu-btn-primary {
    display: inline-flex; align-items: center; gap: 7px;
    background: #0D3D26; color: #ffffff; border: none; border-radius: 6px;
    padding: 9px 16px;
    font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background 0.15s; white-space: nowrap;
}
.gu-btn-primary:hover:not(:disabled) { background: #082A19; }
.gu-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.gu-btn-secondary {
    display: inline-flex; align-items: center; gap: 6px;
    background: #ffffff; color: #1A2419; border: 1px solid #E5E9E5; border-radius: 6px;
    padding: 9px 16px;
    font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background 0.15s;
}
.gu-btn-secondary:hover:not(:disabled) { background: #F7F9F7; }
.gu-btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; }

.gu-btn-danger {
    display: inline-flex; align-items: center; gap: 6px;
    background: #A82A2A; color: #ffffff; border: none; border-radius: 6px;
    padding: 9px 16px;
    font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background 0.15s;
}
.gu-btn-danger:hover { background: #8b2222; }

/* Acción positiva/confirmación fuerte, no destructiva (ej. cerrar turno) —
   equivalente al .btn-accent del Design System GEOMAT v1.0. */
.gu-btn-accent {
    display: inline-flex; align-items: center; gap: 6px;
    background: #4AAD6B; color: #ffffff; border: none; border-radius: 6px;
    padding: 9px 16px;
    font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background 0.15s;
}
.gu-btn-accent:hover:not(:disabled) { background: #3D8E58; }
.gu-btn-accent:disabled { opacity: 0.6; cursor: not-allowed; }

/* Equivalente al .btn-ghost del Design System GEOMAT v1.0 — acción terciaria sin borde. */
.gu-btn-ghost {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; color: #6B7470; border: none; border-radius: 6px;
    padding: 9px 12px;
    font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; font-weight: 500;
    cursor: pointer; transition: background 0.15s, color 0.15s;
}
.gu-btn-ghost:hover:not(:disabled) { background: #F0F4F1; color: #0D3D26; }
.gu-btn-ghost:disabled { opacity: 0.6; cursor: not-allowed; }

.gu-btn-icon {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid #E5E9E5;
    border-radius: 6px;
    color: #6B7470;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}
.gu-btn-icon:hover {
    background: #D7EBDD;
    border-color: #4AAD6B;
    color: #0D3D26;
}

/* ── Button / loading spinners ────────────────────────────────────────────── */
.gu-btn-spinner {
    display: inline-block; width: 13px; height: 13px;
    border: 2px solid rgba(255,255,255,0.35); border-top-color: #ffffff;
    border-radius: 50%; animation: gu-spin 0.75s linear infinite; margin-right: 4px;
}
.gu-spinner-wrap {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 60px 0; gap: 14px;
}
.gu-spinner {
    width: 36px; height: 36px;
    border: 3px solid #E5E9E5; border-top-color: #4AAD6B;
    border-radius: 50%; animation: gu-spin 0.75s linear infinite;
}
@keyframes gu-spin { to { transform: rotate(360deg); } }
.gu-spinner-label {
    font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; color: #6B7470;
}

/* ── Error banner ─────────────────────────────────────────────────────────── */
.gu-error-banner {
    display: flex; align-items: center; gap: 10px;
    margin: 16px 32px; padding: 12px 16px;
    background: #FBE9E9; border: 1px solid #f0b8b8; border-radius: 6px;
    font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; color: #A82A2A;
}
.gu-error-icon { flex-shrink: 0; color: #A82A2A; }

/* ── Grid estándar → ver geomat-grid.css (.geo-grid) ─────────────────────── */
/* gu-grid-wrap mantenido como alias para compatibilidad con componentes existentes */
.gu-grid-wrap { padding: 20px 32px; }

/* ── Status chips ─────────────────────────────────────────────────────────── */
.gu-chip {
    display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px;
    font-family: 'Geist', -apple-system, sans-serif; font-size: 11px; font-weight: 500; white-space: nowrap;
}
.gu-chip--active  { background: #D7EBDD; color: #0D3D26; }
.gu-chip--inactive { background: #EEF0EE; color: #6B7470; }
.gu-chip--admin   { background: #E4EEF5; color: #1F5A82; }
.gu-chip--neutral { background: #EEF0EE; color: #6B7470; }
.gu-cell-center   { display: flex; justify-content: center; }

/* ── Row action buttons ───────────────────────────────────────────────────── */
.gu-row-actions { display: flex; align-items: center; justify-content: center; gap: 6px; }
.gu-action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: none; border-radius: 6px;
    cursor: pointer; transition: background 0.15s, color 0.15s;
    background: transparent; color: #6B7470;
}
.gu-action-btn--edit:hover   { background: #D7EBDD; color: #0D3D26; }
.gu-action-btn--delete:hover { background: #FBE9E9; color: #A82A2A; }

/* ── Dialog → ver geomat-dialog.css (.geo-dialog) ────────────────────────── */
/* gu-dialog* mantenidos como alias para componentes existentes */
.gu-dialog .e-dlg-header-content { background: #0D3D26 !important; padding: 14px 20px !important; }
.gu-dialog .e-dlg-header-content .e-dlg-header { color: #ffffff !important; font-family: 'Geist', -apple-system, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; }
.gu-dialog .e-dlg-header-content .e-icon-dlg-close { color: #ffffff !important; opacity: 0.75 !important; }
.gu-dialog .e-dlg-content { padding: 20px !important; background: #ffffff !important; }
.gu-dialog .e-footer-content { padding: 12px 20px !important; background: #F7F9F7 !important; border-top: 1px solid #E5E9E5 !important; }
.gu-dialog .e-dialog { border-radius: 8px !important; border: 1px solid #E5E9E5 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.14) !important; overflow: hidden !important; }
.gu-dialog-title { font-family: 'Geist', -apple-system, sans-serif; font-size: 15px; font-weight: 600; color: #ffffff; }
.gu-dialog-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.gu-dialog--confirm .e-dlg-header-content { background: #A82A2A !important; }
.gu-confirm-body { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; text-align: center; }
.gu-confirm-icon { color: #A82A2A; flex-shrink: 0; }
.gu-confirm-msg { font-family: 'Geist', -apple-system, sans-serif; font-size: 13px; color: #1A2419; line-height: 1.6; margin: 0; }
.gu-confirm-msg strong { font-weight: 600; color: #A82A2A; }

/* ── Form grid ────────────────────────────────────────────────────────────── */
.gu-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.gu-form-field { display: flex; flex-direction: column; gap: 5px; }
.gu-form-field--full { grid-column: 1 / -1; }
.gu-form-field--check { justify-content: flex-end; padding-bottom: 6px; }
.gu-label {
    font-family: 'Geist', -apple-system, sans-serif;
    font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: #6B7470;
}
.gu-label-hint { text-transform: none; letter-spacing: 0; font-style: italic; font-weight: 400; color: #6B7470; }
.gu-required { color: #A82A2A; }

/* Syncfusion input overrides */
.gu-input.e-input-group,
.gu-input.e-numerictextbox {
    border: 1px solid #E5E9E5 !important; border-radius: 6px !important;
    font-family: 'Geist', -apple-system, sans-serif !important; font-size: 13px !important;
    background: #ffffff !important;
    min-height: 39px !important; align-items: center !important;
}
.gu-input.e-input-group:focus-within {
    border-color: #4AAD6B !important; box-shadow: 0 0 0 3px rgba(74,173,107,0.15) !important;
}
.gu-input.e-input-group.e-disabled { background: #F7F9F7 !important; opacity: 0.7 !important; cursor: not-allowed !important; }

/* SfTextArea: a diferencia de SfTextBox/SfNumericTextBox, el CssClass del componente
   se aplica al wrapper .e-multi-line-input (NO .e-input-group, salvo que se use
   FloatLabelType Auto/Always) y el <textarea> real queda dentro con clase .e-textarea. */
.gu-input.e-multi-line-input {
    border: 1px solid #E5E9E5 !important; border-radius: 6px !important;
    font-family: 'Geist', -apple-system, sans-serif !important;
    background: #ffffff !important;
    padding: 0 !important;
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
}
.gu-input.e-multi-line-input textarea.e-textarea {
    font-family: 'Geist', -apple-system, sans-serif !important; font-size: 13px !important;
    color: #1A2419 !important;
    border: none !important; border-radius: 6px !important; background: transparent !important;
    padding: 9px 12px !important; width: 100% !important; box-sizing: border-box !important;
    outline: none !important;
    resize: vertical !important;
}
.gu-input.e-multi-line-input:focus-within {
    border-color: #4AAD6B !important; box-shadow: 0 0 0 3px rgba(74,173,107,0.15) !important;
}
.gu-input.e-multi-line-input.e-disabled,
.gu-input.e-multi-line-input textarea.e-textarea:disabled {
    background: #F7F9F7 !important; opacity: 0.7 !important; cursor: not-allowed !important;
}

.gu-checkbox .e-checkbox-wrapper .e-frame.e-check { background: #4AAD6B !important; border-color: #4AAD6B !important; }
.gu-checkbox .e-checkbox-wrapper .e-label {
    font-family: 'Geist', -apple-system, sans-serif !important; font-size: 13px !important; color: #1A2419 !important;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .gu-page-header { flex-direction: column; gap: 16px; padding: 20px 16px; }
    .gu-page-title__chevron { display: none; }
    .gu-page-header__info-wrap { display: none; }
    .gu-grid-wrap   { padding: 12px 8px; }
    .gu-form-grid   { grid-template-columns: 1fr; }
    .gu-form-field--full { grid-column: 1; }
}
@media (max-width: 767px) {
    .gu-grid-wrap { padding: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .gu-dialog--responsive.e-dialog { width: 95% !important; max-width: 95vw !important; }
}

/* ── Fix: overlap de etiqueta/valor en SfGrid modo adaptativo (EnableAdaptiveUI +
   RowRenderingMode.Vertical) en mobile — aplica a TODAS las pantallas de
   Maestros/Parámetros que usan este patrón (~35 componentes: GestionUsuarios,
   GestionRoles, GestionMateriales, GestionProveedores, GestionClientes,
   GestionBodegas, GestionLotes, etc.), no es un caso aislado de una pantalla.

   Causa raíz (confirmada inspeccionando el DOM real en /app/parametros/roles,
   viewport 375x812): cuando el grid entra en modo "e-row-responsive", el tema
   fluent2.css de Syncfusion dibuja el nombre de columna con un pseudo-elemento
   `td[data-cell]::before { content: attr(data-cell); position: absolute;
   left: 13px; top: 6px; width: 45%; }`, pensado para convivir en un layout
   lado-a-lado con la regla hermana `td[data-cell] { padding-left: 55%; ... }`
   que debería correr el valor real a la derecha del label. Esa segunda regla
   queda opacada por otras reglas de padding del propio tema con selectores
   distintos (`.e-grid.e-bigger .e-rowcell`, `.e-grid.e-device .e-rowcell`,
   etc.) que ganan la cascada y dejan el padding-left real en ~8-12px — casi la
   misma coordenada del label (left:13px) — por eso el texto de la etiqueta y
   el valor terminan dibujados uno encima del otro.

   Fix: en vez de pelear la guerra de especificidad con el propio tema, se
   redefine el layout como apilado (label arriba, valor abajo) con !important
   para que gane siempre, independiente del orden interno de fluent2.css. Un
   solo lugar para las ~35 pantallas — no se toca el markup de ningún
   componente Razor. */
.e-grid.e-row-responsive .e-gridcontent td.e-rowcell[data-cell] {
    padding-top: 26px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 10px !important;
    position: relative !important;
}

.e-grid.e-row-responsive .e-gridcontent td.e-rowcell[data-cell]::before {
    position: absolute !important;
    top: 8px !important;
    left: 12px !important;
    width: calc(100% - 24px) !important;
    font-family: var(--font-ui, 'Geist', -apple-system, sans-serif) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    color: var(--geo-text-muted, #6B7470) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

a, .btn-link {
    color: #006bb7;
}

/* ── GeoMat Buttons — globales, alcanzan portals de SfDialog ─────────── */
.btn-primary {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--geo-primary); color: #ffffff;
    padding: 9px 16px; border-radius: 6px;
    font-size: 13px; font-weight: 500; font-family: var(--font-ui);
    border: none; cursor: pointer; transition: background 0.15s;
    text-decoration: none;
}
.btn-primary:hover:not(:disabled) { background: var(--geo-primary-dark); color: #ffffff; }
.btn-primary:disabled             { opacity: 0.55; cursor: not-allowed; }

.btn-secondary {
    display: inline-flex; align-items: center; gap: 6px;
    background: #ffffff; border: 1px solid var(--geo-border);
    color: var(--geo-text); padding: 9px 16px; border-radius: 6px;
    font-size: 13px; font-weight: 500; font-family: var(--font-ui);
    cursor: pointer; transition: all 0.15s;
    text-decoration: none;
}
.btn-secondary:hover:not(:disabled) { border-color: var(--geo-accent); color: var(--geo-primary); }
.btn-secondary:disabled              { opacity: 0.55; cursor: not-allowed; }

.btn-accent {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--geo-accent); color: #ffffff;
    padding: 9px 16px; border-radius: 6px;
    font-size: 13px; font-weight: 500; font-family: var(--font-ui);
    border: none; cursor: pointer; transition: background 0.15s;
    text-decoration: none;
}
.btn-accent:hover:not(:disabled) { background: var(--geo-primary); }
.btn-accent:disabled             { opacity: 0.55; cursor: not-allowed; }

.btn-danger {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--geo-danger); color: #ffffff;
    padding: 9px 16px; border-radius: 6px;
    font-size: 13px; font-weight: 500; font-family: var(--font-ui);
    border: none; cursor: pointer; transition: background 0.15s;
}
.btn-danger:hover:not(:disabled) { background: #8B1F1F; }
.btn-danger:disabled             { opacity: 0.55; cursor: not-allowed; }

/* Foco consistente para los botones GEOMAT — sin esto el navegador aplica su
   outline nativo (grueso, negro/azul) que no respeta el token --geo-focus-ring
   y se ve como un botón "roto" al lado de otro sin foco (ver Cuadratura). */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-accent:focus-visible,
.btn-danger:focus-visible {
    outline: none;
    box-shadow: var(--geo-focus-ring);
}

.cf-btn-sm { padding: 5px 12px !important; font-size: 11px !important; }

/* ── GeoMat Design System v1.0 — inputs / pills / tabla / label (globales) ── */
.geo-input {
    border: 1px solid var(--geo-border); border-radius: 6px;
    padding: 9px 12px; font-size: 13px; font-family: var(--font-ui); background: #ffffff;
}
.geo-input:focus { outline: none; border-color: var(--geo-accent); box-shadow: var(--geo-focus-ring); }

.geo-label {
    font-family: var(--font-ui);
    font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--geo-text-muted);
}

.geo-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px; font-family: var(--font-ui); font-size: 11px; font-weight: 500; }
.pill-ok      { background: var(--geo-accent-light); color: var(--geo-primary); }
.pill-warn    { background: var(--geo-warn-bg);      color: var(--geo-warn); }
.pill-danger  { background: var(--geo-danger-bg);    color: var(--geo-danger); }
.pill-info    { background: var(--geo-info-bg);      color: var(--geo-info); }
.pill-neutral { background: #EEF0EE;                 color: var(--geo-text-muted); }

.geo-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font-ui); }
.geo-table th {
    text-align: left; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--geo-text-muted); padding: 8px 10px; border-bottom: 1px solid var(--geo-border); background: #FAFBFA;
}
.geo-table td { padding: 9px 10px; border-bottom: 1px solid var(--geo-border); color: var(--geo-text); }
.geo-table tr:hover td { background: #FAFBFA; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Print — tarja ────────────────────────────────────────────────────────── */
@page { margin: 0; }

@media print {
    body * { visibility: hidden; }
    #arm-print-tarja,
    #arm-print-tarja * {
        visibility: visible;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    #arm-print-tarja {
        position: fixed;
        left: 0; top: 0;
        width: 100%;
        padding: 24px;
        box-sizing: border-box;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ── Botones interactivos del toast de error (GeoToast) — viven acá a propósito ─
   Syncfusion renderiza el shell del SfToast (.e-toast, .e-toast-message,
   .e-toast-content) fuera del árbol de render de Blazor (JS interop), y
   GeoToast.razor no envuelve los <SfToast> en ningún div propio — por eso
   esta regla NUNCA puede vivir en GeoToast.razor.css: el aislamiento de CSS
   de Blazor exige que ::deep tenga un ancestro con el atributo de scope por
   ENCIMA del elemento apuntado, y acá la relación es al revés (.e-toast es
   ancestro de nuestro contenido escopeado, no al revés) — confirmado
   inspeccionando el CSS compilado real (2026-07-20). Aplica a cualquier
   elemento con @onclick dentro del template (Copiar, Ver más detalle); los
   <div> puramente visuales (texto de error, bloque de detalle) sí pueden
   vivir en GeoToast.razor.css. */
.geo-toast-error .geo-toast-error-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

.geo-toast-error .geo-toast-masdetalle-btn,
.geo-toast-error .geo-toast-copy-btn {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-family: -apple-system, 'Segoe UI', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s, transform 0.1s !important;
}

.geo-toast-error .geo-toast-masdetalle-btn {
    background: #EEF0EE !important;
    border: 1.5px solid #D8DCD8 !important;
    color: #5A625E !important;
}

.geo-toast-error .geo-toast-masdetalle-btn:hover {
    background: #E2E5E2 !important;
    border-color: #C7CCC7 !important;
}

.geo-toast-error .geo-toast-masdetalle-btn:active {
    transform: scale(0.96) !important;
}

.geo-toast-error .geo-toast-masdetalle-icon {
    transition: transform 0.15s !important;
    flex-shrink: 0 !important;
}

.geo-toast-error .geo-toast-masdetalle-icon--open {
    transform: rotate(180deg) !important;
}

.geo-toast-error .geo-toast-copy-btn {
    background: var(--geo-danger, #A82A2A) !important;
    border: 1.5px solid var(--geo-danger, #A82A2A) !important;
    color: #ffffff !important;
}

.geo-toast-error .geo-toast-copy-btn:hover {
    background: #8B1F1F !important;
    border-color: #8B1F1F !important;
}

.geo-toast-error .geo-toast-copy-btn:active {
    transform: scale(0.96) !important;
}