/* =============================================================================
   assets/css/app.css — DISEÑO DEL PROGRAMA (minimalista, profesional)
   Un solo sitio para colores, tipografía y componentes. Se carga después de los
   estilos de cada página, así manda sobre ellos.
   Para cambiar el color principal basta con tocar --color-primario.
   ============================================================================= */

:root {
    /* Marca */
    --color-primario: #0e273b;          /* azul marino TecnoReparo */
    --color-primario-hover: #16384f;
    --color-acento: #1e88c8;            /* azul claro del logo */
    --color-acento-suave: #e8f3fa;

    /* Neutros */
    --fondo: #f5f6f8;
    --superficie: #ffffff;
    --superficie-2: #f9fafb;
    --borde: #e5e7eb;
    --borde-fuerte: #d1d5db;
    --texto: #111827;
    --texto-2: #4b5563;
    --texto-3: #9ca3af;

    /* Estados */
    --ok: #15803d;      --ok-suave: #ecfdf3;
    --aviso: #b45309;   --aviso-suave: #fffbeb;
    --error: #b91c1c;   --error-suave: #fef2f2;
    --info: #1d4ed8;    --info-suave: #eff6ff;

    /* Forma */
    --radio: 10px;
    --radio-sm: 7px;
    --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --sombra-elevada: 0 10px 30px rgba(16, 24, 40, .12);

    /* Estructura */
    --alto-barra: 56px;
    --ancho-menu: 248px;
    --ancho-menu-plegado: 68px;

    /* Bootstrap */
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-bg: var(--fondo);
    --bs-body-color: var(--texto);
    --bs-border-color: var(--borde);
    --bs-primary: var(--color-primario);
    --bs-primary-rgb: 14, 39, 59;
    --bs-link-color: var(--color-acento);
    --bs-link-hover-color: var(--color-primario);
}

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--bs-body-font-family) !important;
    background: var(--fondo) !important;
    color: var(--texto);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    user-select: auto !important;
    overflow-x: clip;
}
h1, h2, h3, h4, h5, h6 { color: var(--texto); letter-spacing: -0.02em; }
h3, .fs-3 { font-size: 1.35rem !important; font-weight: 650 !important; }
h4 { font-size: 1.15rem; font-weight: 650; }
h5, .modal-title { font-size: 1rem !important; font-weight: 650 !important; }
.text-muted { color: var(--texto-2) !important; }
small.text-muted.fw-bold, .text-muted.fw-bold { font-weight: 450 !important; }
a { color: var(--color-acento); }
hr { border-color: var(--borde); opacity: 1; }
::selection { background: var(--color-acento-suave); }

/* =============================================================================
   ESTRUCTURA: barra superior + menú lateral + contenido
   ============================================================================= */
.app-barra {
    position: fixed; top: 0; right: 0; left: var(--ancho-menu);
    height: var(--alto-barra);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--borde);
    display: flex; align-items: center; gap: 12px;
    padding: 0 24px;
    z-index: 1030;
    transition: left .2s ease;
}
.app-barra-titulo { font-weight: 600; font-size: 15px; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-barra-acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.app-icono-btn {
    width: 36px; height: 36px; border-radius: var(--radio-sm);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid transparent; background: transparent; color: var(--texto-2);
}
.app-icono-btn:hover { background: var(--superficie-2); border-color: var(--borde); color: var(--texto); }
.app-usuario {
    display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px;
    border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie);
    color: var(--texto); text-decoration: none; font-size: 13px;
}
.app-usuario:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.app-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-primario); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600;
}

.app-menu {
    position: fixed; top: 0; bottom: 0; left: 0; width: var(--ancho-menu);
    background: var(--superficie);
    border-right: 1px solid var(--borde);
    display: flex; flex-direction: column;
    z-index: 1040;
    transition: width .2s ease, transform .2s ease;
}
.app-menu-marca {
    height: var(--alto-barra); flex-shrink: 0;
    display: flex; align-items: center; gap: 10px; padding: 0 18px;
    border-bottom: 1px solid var(--borde);
    text-decoration: none; color: var(--texto); font-weight: 650;
}
.app-menu-marca img { max-height: 30px; max-width: 170px; object-fit: contain; }
.app-menu-nav { flex: 1; overflow-y: auto; padding: 12px 10px 20px; scrollbar-width: thin; }
.app-menu-seccion {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
    color: var(--texto-3); padding: 14px 10px 6px;
}
.app-menu-enlace { position: relative;
    display: flex; align-items: center; gap: 10px;
    height: 36px; padding: 0 10px; margin: 1px 0;
    border-radius: var(--radio-sm);
    color: var(--texto-2); text-decoration: none; font-size: 13.5px; font-weight: 500;
    white-space: nowrap;
}
.app-menu-enlace svg { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.8; }
.app-menu-enlace:hover { background: var(--superficie-2); color: var(--texto); }
.app-menu-enlace.activo { background: var(--color-acento-suave); color: var(--color-primario); font-weight: 600; }
.app-menu-enlace.activo svg { color: var(--color-acento); }
.app-menu-pie { border-top: 1px solid var(--borde); padding: 10px; }

/* Menú plegado (solo iconos) en escritorio */
body.menu-plegado .app-menu { width: var(--ancho-menu-plegado); }
body.menu-plegado .app-menu .app-texto,
body.menu-plegado .app-menu-seccion { display: none; }
body.menu-plegado .app-menu-enlace { justify-content: center; padding: 0; }
body.menu-plegado .app-menu-marca { justify-content: center; padding: 0; }
body.menu-plegado .app-menu-marca img { max-width: 40px; }
body.menu-plegado .app-barra { left: var(--ancho-menu-plegado); }
body.menu-plegado .main-wrapper { margin-left: var(--ancho-menu-plegado) !important; width: calc(100% - var(--ancho-menu-plegado)) !important; }

.main-wrapper {
    margin-top: var(--alto-barra) !important;
    margin-left: var(--ancho-menu) !important;
    width: calc(100% - var(--ancho-menu)) !important;
    padding: 28px 32px 48px !important;
    min-height: calc(100vh - var(--alto-barra));
    transition: margin-left .2s ease;
}
.main-wrapper > .container-fluid { max-width: 1480px; margin: 0 auto; }

.app-velo { display: none; }

@media (max-width: 991.98px) {
    .app-menu { transform: translateX(-100%); width: 272px !important; box-shadow: var(--sombra-elevada); }
    body.menu-abierto .app-menu { transform: translateX(0); }
    body.menu-abierto .app-velo { display: block; position: fixed; inset: 0; background: rgba(17, 24, 39, .35); z-index: 1035; }
    body.menu-plegado .app-menu .app-texto, body.menu-plegado .app-menu-seccion { display: initial; }
    .app-barra, body.menu-plegado .app-barra { left: 0; padding: 0 14px; }
    .main-wrapper, body.menu-plegado .main-wrapper { margin-left: 0 !important; width: 100% !important; padding: 18px 14px 40px !important; }
    .app-usuario .app-texto { display: none; }
}

/* =============================================================================
   COMPONENTES
   ============================================================================= */

/* Tarjetas */
.card, .card-seccion {
    background: var(--superficie);
    border: 1px solid var(--borde) !important;
    border-radius: var(--radio) !important;
    box-shadow: var(--sombra) !important;
}
.card-header {
    background: var(--superficie) !important;
    color: var(--texto) !important;
    border-bottom: 1px solid var(--borde) !important;
    font-weight: 600; font-size: 14px;
    padding: 12px 16px !important;
    border-radius: var(--radio) var(--radio) 0 0 !important;
}
.card-header.text-white, .card-header .text-white { color: var(--texto) !important; }
.card-footer { background: var(--superficie-2); border-top: 1px solid var(--borde); }
.bg-light { background-color: var(--superficie-2) !important; }

/* Botones */
.btn {
    font-weight: 500 !important; font-size: 13.5px;
    border-radius: var(--radio-sm);
    padding: 7px 14px;
    box-shadow: none !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn-sm { font-size: 12.5px; padding: 4px 10px; }
.btn-lg { font-size: 15px; padding: 10px 18px; }
.btn.w-100 { display: flex; }
.btn-primary, .btn-corp, .btn-topbar-action.btn-primary {
    background: var(--color-primario) !important; border: 1px solid var(--color-primario) !important; color: #fff !important;
}
.btn-primary:hover, .btn-corp:hover { background: var(--color-primario-hover) !important; border-color: var(--color-primario-hover) !important; }
.btn-corp-outline, .btn-topbar-action, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary, .btn-light, .btn-card-header {
    background: var(--superficie) !important; border: 1px solid var(--borde-fuerte) !important; color: var(--texto) !important;
}
.btn-corp-outline:hover, .btn-topbar-action:hover, .btn-outline-primary:hover, .btn-outline-dark:hover,
.btn-outline-secondary:hover, .btn-light:hover, .btn-card-header:hover {
    background: var(--superficie-2) !important; border-color: var(--texto-3) !important; color: var(--texto) !important;
}
.btn-success { background: var(--ok) !important; border-color: var(--ok) !important; color: #fff !important; }
.btn-success:hover { filter: brightness(.94); }
.btn-danger { background: var(--error) !important; border-color: var(--error) !important; }
.btn-outline-danger { background: var(--superficie) !important; border-color: #f3c4c4 !important; color: var(--error) !important; }
.btn-outline-danger:hover { background: var(--error-suave) !important; }
.btn-outline-success { background: var(--superficie) !important; border-color: #b7e4c7 !important; color: var(--ok) !important; }
.btn-outline-success:hover { background: var(--ok-suave) !important; }
.btn-secondary { background: var(--superficie-2) !important; border: 1px solid var(--borde-fuerte) !important; color: var(--texto) !important; }
.btn-warning { background: #f59e0b !important; border-color: #f59e0b !important; color: #111 !important; }
.btn-info { background: var(--color-acento) !important; border-color: var(--color-acento) !important; color: #fff !important; }
.btn:disabled, .btn.disabled { opacity: .55; }

/* Formularios */
.form-control, .form-select {
    border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
    font-size: 14px; padding: 7px 11px; color: var(--texto); background-color: var(--superficie);
    box-shadow: none !important; font-weight: 400 !important;
}
.form-control-sm, .form-select-sm { font-size: 13px; padding: 5px 9px; }
.form-control:focus, .form-select:focus { border-color: var(--color-acento); box-shadow: 0 0 0 3px rgba(30, 136, 200, .15) !important; }
.form-control::placeholder { color: var(--texto-3); }
.form-label { font-size: 12.5px; font-weight: 550 !important; color: var(--texto-2); margin-bottom: 5px; }
.form-check-input:checked { background-color: var(--color-primario); border-color: var(--color-primario); }
.input-group-text { background: var(--superficie-2); border-color: var(--borde-fuerte); color: var(--texto-2); }

/* Tablas */
.table { --bs-table-bg: transparent; font-size: 13.5px; color: var(--texto); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: 11px 14px; border-bottom-color: var(--borde); }
.table thead th, .table-light th, .table-admin th, .table-dark th, thead.table-dark th {
    background: var(--superficie-2) !important; color: var(--texto-2) !important;
    font-size: 11.5px !important; font-weight: 600 !important;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--borde) !important; white-space: nowrap;
}
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--superficie-2); background: var(--superficie-2); }
.table-responsive, .table-responsive-wrapper { border-radius: var(--radio); }
.card > .table-responsive:first-child, .card > .card-body > .table-responsive { border-radius: 0 0 var(--radio) var(--radio); }

/* Etiquetas (badges): versión suave */
.badge { font-weight: 550 !important; font-size: 11.5px; padding: 4px 8px; border-radius: 6px; letter-spacing: 0; }
.badge.bg-success { background: var(--ok-suave) !important; color: var(--ok) !important; }
.badge.bg-danger { background: var(--error-suave) !important; color: var(--error) !important; }
.badge.bg-warning { background: var(--aviso-suave) !important; color: var(--aviso) !important; }
.badge.bg-info { background: var(--info-suave) !important; color: var(--info) !important; }
.badge.bg-primary { background: var(--color-acento-suave) !important; color: var(--color-primario) !important; }
.badge.bg-secondary, .badge.bg-dark, .badge.bg-light { background: #f3f4f6 !important; color: var(--texto-2) !important; border: 1px solid var(--borde); }

/* Avisos */
.alert { border-radius: var(--radio); border: 1px solid transparent; font-size: 13.5px; padding: 10px 14px; }
.alert-success { background: var(--ok-suave); border-color: #bbf7d0; color: #14532d; }
.alert-danger { background: var(--error-suave); border-color: #fecaca; color: #7f1d1d; }
.alert-warning { background: var(--aviso-suave); border-color: #fde68a; color: #78350f; }
.alert-info { background: var(--info-suave); border-color: #bfdbfe; color: #1e3a8a; }

/* Ventanas (modales) */
.modal-content { border: 1px solid var(--borde) !important; border-radius: 14px !important; box-shadow: var(--sombra-elevada) !important; }
.modal-header {
    background: var(--superficie) !important; color: var(--texto) !important;
    border-bottom: 1px solid var(--borde) !important; padding: 14px 18px !important;
    border-radius: 14px 14px 0 0 !important;
}
.modal-header.text-white, .modal-header .text-white { color: var(--texto) !important; }
.modal-header .btn-close-white { filter: none !important; }
.modal-footer { border-top: 1px solid var(--borde) !important; background: var(--superficie-2); border-radius: 0 0 14px 14px; }
.modal-backdrop.show { opacity: .35; }

/* Pestañas */
.nav-tabs { border-bottom: 1px solid var(--borde); gap: 4px; }
.nav-tabs .nav-link { border: none !important; color: var(--texto-2); font-weight: 500; padding: 9px 14px; border-bottom: 2px solid transparent !important; }
.nav-tabs .nav-link.active { color: var(--color-primario); background: transparent; border-bottom-color: var(--color-primario) !important; font-weight: 600; }
.nav-pills .nav-link.active { background: var(--color-primario); }

/* Desplegables y listas */
.dropdown-menu { border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-elevada); padding: 6px; font-size: 13.5px; }
.dropdown-item { border-radius: 6px; padding: 7px 10px; font-weight: 450 !important; }
.list-group-item { border-color: var(--borde); }

/* Campos de ficha (filas etiqueta/valor) */
.field-label { color: var(--texto-2); }

/* Fondos oscuros antiguos -> neutros */
.bg-dark:not(.badge) { background-color: var(--color-primario) !important; }

/* =============================================================================
   IMPRESIÓN: sin barra ni menú
   ============================================================================= */
@media print {
    .app-barra, .app-menu, .app-velo { display: none !important; }
    .main-wrapper { margin: 0 !important; width: 100% !important; padding: 0 !important; }
    body { background: #fff !important; }
}

/* =============================================================================
   CLASES ANTIGUAS DE ALGUNAS PÁGINAS (para que sigan el diseño común)
   ============================================================================= */
.panel-header-title, .header-calc {
    background: var(--color-primario) !important; color: #fff !important;
    border-bottom: 0 !important;
}
.panel-header-title *, .header-calc * { color: inherit; }
.header-calc .badge { background: rgba(255,255,255,.16) !important; color: #fff !important; }
.tabla-ticket-tpv th, .cal-table th {
    background: var(--superficie-2) !important; color: var(--texto-2) !important;
    font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.btn-ver-ficha-corp { background: var(--color-primario) !important; color: #fff !important; border-radius: var(--radio-sm) !important; }
.accordion-permisos .accordion-button { background: var(--superficie-2) !important; color: var(--texto) !important; box-shadow: none !important; }
.accordion-permisos .accordion-button:not(.collapsed) { background: var(--color-acento-suave) !important; color: var(--color-primario) !important; }
.search-item-option:hover, .search-item:hover, .sugerencia-item:hover { background: var(--color-acento-suave) !important; color: var(--texto) !important; }

/* =============================================================================
   PÁGINAS DE ACCESO (login del taller y del portal) Y PÁGINA PÚBLICA DE CITAS
   ============================================================================= */
body.pagina-acceso {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: radial-gradient(1200px 600px at 50% -10%, #e3eef7 0%, var(--fondo) 60%) !important;
}
.pagina-acceso .card-login, .pagina-acceso .login-card {
    width: 100%; max-width: 400px;
    background: var(--superficie) !important;
    border: 1px solid var(--borde) !important; border-radius: 16px !important;
    box-shadow: var(--sombra-elevada) !important;
    padding: 36px 32px !important;
}
.pagina-acceso h3, .pagina-acceso h4, .pagina-acceso h5 { font-weight: 650 !important; }
.pagina-acceso .btn-login, .pagina-acceso button[type=submit] {
    background: var(--color-primario) !important; border: 1px solid var(--color-primario) !important; color: #fff !important;
    border-radius: var(--radio-sm) !important; padding: 10px !important; font-weight: 600 !important; font-size: 14px !important;
    transform: none !important; box-shadow: none !important;
}
.pagina-acceso .btn-login:hover, .pagina-acceso button[type=submit]:hover { background: var(--color-primario-hover) !important; color: #fff !important; }
.pagina-acceso .form-control { border-radius: var(--radio-sm) !important; padding: 9px 12px !important; font-weight: 400 !important; }

body.pagina-publica .top-navbar {
    background: var(--superficie) !important; border-bottom: 1px solid var(--borde) !important;
}
body.pagina-publica .top-navbar, body.pagina-publica .top-navbar * { color: var(--texto) !important; }

/* =============================================================================
   BOTONES: EFECTO AL PASAR EL RATÓN (se invierten para que se note siempre)
   - Oscuro  -> blanco con texto y borde de su color
   - Blanco  -> oscuro con texto blanco
   Se fijan fondo, texto y borde a la vez para que nunca quede texto oscuro sobre fondo oscuro.
   ============================================================================= */
.btn { transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; }

/* Azul marino (principal) */
.btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active,
.btn-corp:hover, .btn-corp:focus-visible, .btn-corp:active,
.btn-dark:hover, .btn-dark:focus-visible, .btn-dark:active,
.btn-modulo-dark:hover, .btn-ver-ficha-corp:hover, .btn-login:hover {
    background: var(--superficie) !important; color: var(--color-primario) !important; border-color: var(--color-primario) !important;
    box-shadow: 0 0 0 1px var(--color-primario) inset !important;
}

/* Blancos / contorno -> azul marino */
.btn-corp-outline:hover, .btn-corp-outline:focus-visible, .btn-corp-outline:active,
.btn-topbar-action:hover, .btn-topbar-action:focus-visible, .btn-topbar-action:active,
.btn-outline-primary:hover, .btn-outline-dark:hover, .btn-outline-secondary:hover, .btn-outline-info:hover,
.btn-light:hover, .btn-secondary:hover, .btn-card-header:hover, .btn-modulo-accion:hover,
.btn-link-kpi:hover, .btn-cat-select:hover, .btn-movil-selector:hover, .btn-gestion:hover, .btn-tab-foto:hover,
.btn-outline-light:hover, .btn-billete:hover,
.btn-check + .btn:hover {
    background: var(--color-primario) !important; color: #fff !important; border-color: var(--color-primario) !important;
}

/* Verde */
.btn-success:hover, .btn-success:focus-visible, .btn-success:active {
    background: var(--superficie) !important; color: var(--ok) !important; border-color: var(--ok) !important;
    box-shadow: 0 0 0 1px var(--ok) inset !important; filter: none;
}
.btn-outline-success:hover { background: var(--ok) !important; color: #fff !important; border-color: var(--ok) !important; }

/* Rojo */
.btn-danger:hover, .btn-danger:focus-visible, .btn-danger:active {
    background: var(--superficie) !important; color: var(--error) !important; border-color: var(--error) !important;
    box-shadow: 0 0 0 1px var(--error) inset !important;
}
.btn-outline-danger:hover { background: var(--error) !important; color: #fff !important; border-color: var(--error) !important; }

/* Ámbar e informativo */
.btn-warning:hover { background: var(--superficie) !important; color: var(--aviso) !important; border-color: #f59e0b !important; box-shadow: 0 0 0 1px #f59e0b inset !important; }
.btn-outline-warning { background: var(--superficie) !important; border-color: #fcd34d !important; color: var(--aviso) !important; }
.btn-outline-warning:hover { background: #f59e0b !important; color: #111 !important; border-color: #f59e0b !important; }
.btn-info:hover { background: var(--superficie) !important; color: var(--color-acento) !important; border-color: var(--color-acento) !important; }

/* Lo que va dentro del botón (iconos, textos con color propio) sigue el color del botón */
.btn:hover :not(.badge):not(.badge *), .btn:focus-visible :not(.badge):not(.badge *) { color: inherit !important; }

/* Botón seleccionado (pestañas, filtros con .active) */
.btn.active, .btn-check:checked + .btn {
    background: var(--color-primario) !important; color: #fff !important; border-color: var(--color-primario) !important;
}

/* Foco con teclado */
.btn:focus-visible, .app-menu-enlace:focus-visible, .form-check-input:focus-visible {
    outline: 2px solid var(--color-acento) !important; outline-offset: 2px;
}

/* Elementos de menú y desplegables: hover más visible */
.dropdown-item:hover, .dropdown-item:focus { background: var(--color-acento-suave); color: var(--color-primario); }
.app-menu-enlace:hover { background: #eef2f6; color: var(--color-primario); }
.app-icono-btn:hover { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.list-group-item-action:hover { background: var(--color-acento-suave); }

/* =============================================================================
   AVISOS DESTACADOS (novedades sin ver, pendientes...)
   Uso: <div class="card aviso-destacado"> (ámbar) o "aviso-destacado aviso-urgente" (rojo)
   ============================================================================= */
.aviso-destacado {
    background: #fffbeb !important;
    border: 1px solid #fcd34d !important;
    border-left: 4px solid #f59e0b !important;
    box-shadow: 0 2px 10px rgba(245, 158, 11, .12) !important;
}
.aviso-destacado > .card-header {
    background: #fef3c7 !important; color: #78350f !important;
    border-bottom: 1px solid #fde68a !important; font-weight: 650;
}
.aviso-destacado .list-group-item, .aviso-destacado .card-body { background: transparent !important; border-color: #fde68a !important; }
.aviso-destacado.aviso-urgente { background: #fef2f2 !important; border-color: #fca5a5 !important; border-left-color: #dc2626 !important; box-shadow: 0 2px 10px rgba(220, 38, 38, .12) !important; }
.aviso-destacado.aviso-urgente > .card-header { background: #fee2e2 !important; color: #7f1d1d !important; border-bottom-color: #fecaca !important; }

/* Número de avisos: círculo rojo que late suavemente */
.aviso-contador {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 7px; margin-left: 6px;
    border-radius: 999px; background: #dc2626; color: #fff !important;
    font-size: 12px; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, .5);
    animation: aviso-latido 2s ease-out infinite;
}
@keyframes aviso-latido {
    0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); }
    70% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) { .aviso-contador { animation: none; } }

/* Contador en el menú lateral (p. ej. reparaciones nuevas) */
.app-menu-contador {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 999px; background: #dc2626; color: #fff;
    font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
body.menu-plegado .app-menu-contador { position: absolute; margin: -18px 0 0 22px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }

/* =============================================================================
   UNIFICACIÓN: cabeceras de tarjeta legibles y botones de un solo estilo
   ============================================================================= */
/* Cabeceras de tarjeta con clases de fondo antiguas (bg-dark, bg-primary...) -> neutras */
.card-header[class*="bg-"], .modal-header[class*="bg-"] {
    background: var(--superficie) !important; color: var(--texto) !important;
}
.card-header[class*="bg-"] *:not(.btn):not(.badge):not(.aviso-contador),
.modal-header[class*="bg-"] *:not(.btn):not(.badge) { color: inherit !important; }

/* Acciones principales: todas en azul marino (antes verdes, azules o ámbar según la página) */
.btn-success, .btn-info, .btn-warning {
    background: var(--color-primario) !important; border: 1px solid var(--color-primario) !important; color: #fff !important;
}
.btn-success:hover, .btn-success:focus-visible, .btn-success:active,
.btn-info:hover, .btn-info:focus-visible, .btn-info:active,
.btn-warning:hover, .btn-warning:focus-visible, .btn-warning:active {
    background: var(--superficie) !important; color: var(--color-primario) !important; border-color: var(--color-primario) !important;
    box-shadow: 0 0 0 1px var(--color-primario) inset !important;
}
/* Secundarias: todas blancas con borde */
.btn-outline-success, .btn-outline-warning, .btn-outline-info {
    background: var(--superficie) !important; border: 1px solid var(--borde-fuerte) !important; color: var(--texto) !important;
}
.btn-outline-success:hover, .btn-outline-warning:hover, .btn-outline-info:hover {
    background: var(--color-primario) !important; color: #fff !important; border-color: var(--color-primario) !important;
}
/* Solo borrar/anular conserva el rojo (btn-danger / btn-outline-danger) */

/* Textos de color en botones heredan el color del botón */
.btn[class*="btn-"] .text-white, .btn[class*="btn-"] .text-dark { color: inherit !important; }
.btn.text-dark, .btn.text-white { color: inherit; }
.btn-success.text-dark, .btn-warning.text-dark, .btn-info.text-dark { color: #fff !important; }

/* =============================================================================
   TABLAS -> TARJETAS cuando no caben (lo decide app.js midiendo el ancho real,
   así funciona igual con el menú abierto, plegado o en el móvil)
   ============================================================================= */
table.modo-tarjetas, table.modo-tarjetas > tbody, table.modo-tarjetas > tfoot,
table.modo-tarjetas > tbody > tr, table.modo-tarjetas > tfoot > tr,
table.modo-tarjetas > tbody > tr > td, table.modo-tarjetas > tfoot > tr > td {
    display: block !important; width: 100% !important;
}
table.modo-tarjetas > thead { display: none !important; }
table.modo-tarjetas { background: transparent !important; border: 0 !important; min-width: 0 !important; }
.table-responsive:has(> table.modo-tarjetas), .table-responsive-wrapper:has(table.modo-tarjetas) { overflow: visible !important; }
.card:has(> .card-body > .table-responsive > table.modo-tarjetas),
.card:has(> .table-responsive > table.modo-tarjetas) { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.card-body:has(> .table-responsive > table.modo-tarjetas) { padding: 0 !important; }

table.modo-tarjetas > tbody > tr {
    background: var(--superficie) !important;
    border: 1px solid var(--borde) !important; border-radius: var(--radio) !important;
    box-shadow: var(--sombra) !important;
    margin: 0 0 14px !important; padding: 0 !important; overflow: hidden;
}
table.modo-tarjetas > tbody > tr > td {
    text-align: right !important;
    padding: 10px 16px !important;
    border: 0 !important; border-bottom: 1px solid var(--borde) !important;
    background: transparent !important;
    min-height: 40px; overflow-wrap: anywhere;
}
table.modo-tarjetas > tbody > tr > td:last-child { border-bottom: 0 !important; }
table.modo-tarjetas > tbody > tr > td::before {
    content: attr(data-label);
    float: left; text-align: left; padding-right: 14px; max-width: 45%;
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--texto-2); line-height: 20px;
}
table.modo-tarjetas > tbody > tr > td[data-label=""]::before { display: none; }
table.modo-tarjetas > tbody > tr > td > .d-flex,
table.modo-tarjetas > tbody > tr > td > div { justify-content: flex-end !important; }
table.modo-tarjetas > tbody > tr > td .btn { margin: 2px 0 2px 4px; }

/* Primera fila de cada tarjeta: franja azul marino que separa un registro de otro */
table.modo-tarjetas > tbody > tr > td:first-child:not(:has(input, select, textarea)) {
    background: var(--color-primario) !important; color: #fff !important;
    border-bottom: 0 !important; padding: 12px 16px !important;
    font-weight: 600;
}
table.modo-tarjetas > tbody > tr > td:first-child:not(:has(input, select, textarea))::before { color: rgba(255, 255, 255, .65); }
table.modo-tarjetas > tbody > tr > td:first-child:not(:has(input, select, textarea)) *:not(.badge):not(.btn) { color: #fff !important; }
/* Celdas con campos de formulario: la etiqueta arriba y el campo a todo el ancho */
table.modo-tarjetas > tbody > tr > td:has(input, select, textarea) { text-align: left !important; }
table.modo-tarjetas > tbody > tr > td:has(input, select, textarea)::before { float: none; display: block; max-width: none; margin-bottom: 4px; }
table.modo-tarjetas > tbody > tr:has(td input, td select) { border-top: 3px solid var(--color-primario) !important; }

/* Filas que no son registros (mensajes "sin resultados", totales) */
table.modo-tarjetas > tbody > tr.fila-unica > td:first-child,
table.modo-tarjetas > tbody > tr > td[colspan]:only-child {
    background: transparent !important; color: var(--texto-2) !important; text-align: center !important; font-weight: 400;
}
table.modo-tarjetas > tbody > tr > td[colspan]:only-child::before { display: none; }
table.modo-tarjetas > tfoot > tr > td { text-align: right !important; border: 0 !important; padding: 6px 16px !important; }

/* =============================================================================
   MÓVIL: nada debe obligar a desplazarse en horizontal
   ============================================================================= */
html, body { max-width: 100%; overflow-x: clip; }
.main-wrapper img, .main-wrapper video, .main-wrapper canvas { max-width: 100%; height: auto; }
.main-wrapper pre, .main-wrapper code { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
    .main-wrapper .row { --bs-gutter-x: 12px; }
    .main-wrapper .d-flex.justify-content-between.flex-wrap > * { max-width: 100%; }
    .main-wrapper h3, .main-wrapper .fs-3 { font-size: 1.2rem !important; }
    .modal-dialog { margin: 10px auto; width: calc(100% - 20px); }
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .nav-tabs .nav-link { white-space: nowrap; }
}

/* Grupos campo + botón (buscadores con botón al lado): en móvil el botón no aplasta al campo */
@media (max-width: 575.98px) {
    .main-wrapper .input-group { flex-wrap: nowrap; }
    .main-wrapper .input-group > .btn { font-size: 13px !important; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
    .main-wrapper .input-group > .form-control { min-width: 0; flex: 1 1 60%; }
    .main-wrapper .input-group-lg > .form-control, .main-wrapper .input-group-lg > .btn { font-size: 15px !important; }
    .main-wrapper .input-group > .btn { flex: 0 0 auto; }
}

/* Celdas que ya traen su propia etiqueta: no repetirla en modo tarjeta */
table.modo-tarjetas > tbody > tr > td:has(> label, > .form-label, > div > label)::before { display: none; }

/* Indicadores (tarjetas de cifras): todos iguales, con un filete de color a la izquierda */
.metrica-card, .kpi-card, .card-kpi, .tarjeta-kpi {
    background: var(--superficie) !important;
    border: 1px solid var(--borde) !important;
    border-left: 3px solid var(--color-acento) !important;
    border-radius: var(--radio) !important;
    box-shadow: var(--sombra) !important;
    padding: 14px 16px !important;
}
.metrica-card h3, .metrica-card h4, .metrica-card .fs-3, .metrica-card .fs-4 { color: var(--texto) !important; }
.border-start.border-4, .border-start.border-5 { border-left-width: 3px !important; }
/* Contenedor de una tabla convertida en tarjetas: sin caja propia (las tarjetas ya la tienen) */
.card:has(table.modo-tarjetas):not(:has(> .card-header)):not(:has(form .form-control:not(table *))) {
    background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
}
.card:has(table.modo-tarjetas):not(:has(> .card-header)) > .card-body { padding: 0 !important; }
.card-stat { /* indicadores de Arqueos */
    background: var(--superficie) !important; border: 1px solid var(--borde) !important;
    border-left: 3px solid var(--color-acento) !important; border-radius: var(--radio) !important;
    box-shadow: var(--sombra) !important; padding: 12px 14px !important;
}
/* Selectores estrechos (año, mes): que la flecha no tape el texto */
.form-select { padding-right: 2rem !important; background-position: right .6rem center; }
.form-select-sm { min-width: 84px; }
.form-select[style*="width: auto"], .form-select[style*="width:auto"] { min-width: 96px; }
/* Etiquetas y campos de formulario siempre del mismo color (antes algunos en azul/verde/rojo) */
.form-label[class*="text-"], label.small[class*="text-"] { color: var(--texto-2) !important; }
.form-control[class*="border-"], .form-select[class*="border-"] { border-color: var(--borde-fuerte) !important; }
.form-control[class*="border-"]:focus, .form-select[class*="border-"]:focus { border-color: var(--color-acento) !important; }
/* Cajas con fondos de color fuertes antiguos -> versión suave del diseño */
.bg-gradient { background-image: none !important; }
div.bg-warning, section.bg-warning, .card.bg-warning { background: #fffbeb !important; border: 1px solid #fde68a !important; color: #78350f !important; }
div.bg-info:not(.badge), .card.bg-info { background: var(--info-suave) !important; border: 1px solid #bfdbfe !important; color: #1e3a8a !important; }
div.bg-warning .text-dark, div.bg-warning h4, div.bg-warning h5 { color: #78350f !important; }

/* =============================================================================
   FICHA DE REPARACIÓN: cabecera azul marino, pestañas y tarjetas con barra azul
   ============================================================================= */
.ficha-cabecera { background: var(--color-primario); color: #fff; border-radius: var(--radio); padding: 18px 20px; box-shadow: var(--sombra); }
.ficha-volver { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.3); }
.ficha-volver:hover { background: #fff; color: var(--color-primario); }
.ficha-codigo { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 1.6rem !important; font-weight: 700 !important; margin: 0; color: #fff !important; letter-spacing: -0.01em; }
.ficha-badge { background: var(--color-acento) !important; color: #fff !important; border: 0 !important; }
.ficha-badge-2 { background: rgba(255,255,255,.14) !important; color: #fff !important; }
.ficha-sub { color: #9fb6c8; font-size: 13px; margin-top: 4px; }
.ficha-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-acciones > .btn, .ficha-acciones > .dropdown > .btn, .ficha-acciones > form > .btn {
    background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.4) !important;
}
.ficha-acciones > .btn:hover, .ficha-acciones > .dropdown > .btn:hover, .ficha-acciones > .dropdown > .btn.show, .ficha-acciones > form > .btn:hover {
    background: #fff !important; color: var(--color-primario) !important; border-color: #fff !important; box-shadow: none !important;
}
.ficha-acciones .dropdown-menu form { margin: 0; }

.ficha-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: 16px; background: rgba(255,255,255,.15); border-radius: 8px; overflow: hidden; }
.ficha-resumen > div { background: #16384f; padding: 10px 14px; min-width: 0; }
.ficha-resumen span { display: block; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #9fb6c8; }
.ficha-resumen strong { display: block; font-weight: 600; font-size: 14.5px; color: #fff; overflow-wrap: anywhere; }
.ficha-resumen a { color: #fff; text-decoration: none; }
.ficha-importe { font-size: 1.15rem !important; }
.ficha-enlaces { display: flex; gap: 10px; margin-top: 2px; }
.ficha-enlaces a, .ficha-enlaces button { background: none; border: 0; padding: 0; color: #9fd3f3; font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.ficha-enlaces a:hover, .ficha-enlaces button:hover { color: #fff; }

.ficha-pasos { list-style: none; display: flex; margin: 18px 0 0; padding: 0; }
.ficha-pasos li { flex: 1; position: relative; text-align: center; font-size: 11.5px; color: #9fb6c8; padding-top: 22px; min-width: 0; }
.ficha-pasos li::before { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: #2c4a63; z-index: 1; }
.ficha-pasos li::after { content: ''; position: absolute; top: 10px; left: -50%; width: 100%; height: 2px; background: #2c4a63; }
.ficha-pasos li:first-child::after { display: none; }
.ficha-pasos li span { display: block; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ficha-pasos li.hecho { color: #d6e3ee; }
.ficha-pasos li.hecho::before, .ficha-pasos li.hecho::after, .ficha-pasos li.actual::after { background: #fff; }
.ficha-pasos li.actual { color: #fff; font-weight: 700; }
.ficha-pasos li.actual::before { width: 16px; height: 16px; top: 3px; background: var(--color-acento); box-shadow: 0 0 0 4px rgba(30,136,200,.4); }
.ficha-cancelada { margin-top: 14px; padding: 8px 12px; border-radius: 8px; background: rgba(220,38,38,.25); color: #fff; font-weight: 600; }

/* Pestañas */
.ficha-pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 16px; }
.ficha-pestanas button {
    display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; border-bottom: 3px solid transparent;
    padding: 11px 16px; font-size: 14px; font-weight: 500; color: var(--texto-2); cursor: pointer; white-space: nowrap;
}
.ficha-pestanas button:hover { color: var(--color-primario); background: #eef2f6; border-radius: 8px 8px 0 0; }
.ficha-pestanas button.activa { color: var(--color-primario); border-bottom-color: var(--color-primario); font-weight: 700; }
.ficha-contador { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--color-primario); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ficha-panel { display: none; }
.ficha-panel.activa { display: block; }

/* Tarjetas de la ficha: barra azul marino completa */
.ficha .card { margin-bottom: 0; overflow: hidden; }
.ficha .card-header { background: var(--color-primario) !important; color: #fff !important; border-bottom: 0 !important; font-weight: 600; padding: 10px 16px !important; }
.ficha .card-header .btn { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.45) !important; padding: 3px 10px; font-size: 12.5px; }
.ficha .card-header .btn:hover, .ficha .card-header .btn.active { background: #fff !important; color: var(--color-primario) !important; border-color: #fff !important; box-shadow: none !important; }
.ficha .card-body { padding: 16px !important; }
.ficha-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ficha-datos > div { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borde); }
.ficha-datos > div:first-child { padding-top: 0; }
.ficha-datos > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ficha-datos span { color: var(--texto-2); font-size: 13px; flex-shrink: 0; }
.ficha-datos strong { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ficha-averia { font-size: 15px; font-weight: 500; color: var(--texto); }
.ficha-estado { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ficha-estado-campo { flex: 1 1 220px; }
.ficha-estado-campo .form-label { margin-bottom: 4px; }
.ficha-estado-boton { flex: 0 0 auto; }
.ficha-nueva-linea { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; }
.ficha-lista { list-style: none; margin: 0; padding: 0; }
.ficha-lista li { padding: 10px 0; border-bottom: 1px solid var(--borde); }
.ficha-lista li:first-child { padding-top: 0; }
.ficha-lista li:last-child { border-bottom: 0; padding-bottom: 0; }
.ficha-lista-meta { font-size: 12px; color: var(--texto-2); margin-bottom: 3px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ficha .img-historial-preview { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--borde); }

/* MÓVIL */
@media (max-width: 991.98px) {
    .ficha-rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .ficha-cabecera { padding: 14px; border-radius: var(--radio); }
    .ficha-codigo { font-size: 1.35rem !important; }
    .ficha-acciones { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .ficha-acciones > .dropdown > .btn, .ficha-acciones > .btn, .ficha-acciones > form > .btn { width: 100%; justify-content: center; }
    .ficha-acciones > .btn, .ficha-acciones > form > .btn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ficha-resumen { grid-template-columns: 1fr 1fr; }
    .ficha-pasos li span { display: none; }
    .ficha-pasos li.actual span { display: block; position: absolute; left: 50%; transform: translateX(-50%); overflow: visible; }
    .ficha-pasos { margin-bottom: 14px; }
    /* Pestañas fijas bajo la barra superior y repartidas a lo ancho */
    .ficha-pestanas { position: sticky; top: var(--alto-barra); z-index: 20; background: var(--fondo); margin: 0 -14px 14px; padding: 0 8px; }
    .ficha-pestanas button { flex: 1 1 0; justify-content: center; padding: 11px 6px; font-size: 13px; gap: 5px; min-width: 0; }
    .ficha-pestanas button svg { display: none; }
    .ficha-estado-boton, .ficha-estado-boton .btn { width: 100%; }
}
.ficha-dato-clave { flex-wrap: wrap; }
.ficha-dato-clave > .text-end { margin-left: auto; min-width: 0; max-width: 100%; }
.ficha-dato-clave .badge { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.ficha-dato-clave .patron-ver-box { width: 150px; max-width: 100%; margin-left: auto; }

/* =============================================================================
   TABLAS -> FILAS COMPACTAS (pantallas medianas: cada registro en una fila de 1-2 líneas)
   ============================================================================= */
table.modo-filas, table.modo-filas > tbody, table.modo-filas > tfoot { display: block !important; width: 100% !important; min-width: 0 !important; background: transparent !important; border: 0 !important; }
table.modo-filas > thead { display: none !important; }
.table-responsive:has(> table.modo-filas), .table-responsive-wrapper:has(table.modo-filas) { overflow: visible !important; }
.card:has(table.modo-filas):not(:has(> .card-header)):not(:has(form .form-control:not(table *))) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
.card:has(table.modo-filas):not(:has(> .card-header)) > .card-body { padding: 0 !important; }

table.modo-filas > tbody > tr {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px 18px;
    background: var(--superficie) !important;
    border: 1px solid var(--borde) !important; border-left: 3px solid var(--color-primario) !important;
    border-radius: 0 var(--radio) var(--radio) 0 !important;
    padding: 10px 14px !important; margin: 0 0 8px !important;
    box-shadow: var(--sombra) !important;
}
table.modo-filas > tbody > tr:hover { border-color: var(--borde-fuerte) !important; border-left-color: var(--color-acento) !important; }
table.modo-filas > tbody > tr > td {
    display: block !important; flex: 1 1 120px; min-width: 0;
    padding: 0 !important; border: 0 !important; background: transparent !important;
    text-align: left !important; overflow-wrap: anywhere;
}
table.modo-filas > tbody > tr > td::before {
    content: attr(data-label); display: block;
    font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 1px;
}
table.modo-filas > tbody > tr > td[data-label=""]::before { display: none; }
/* Primera columna (nº de orden, factura...): destacada a la izquierda */
table.modo-filas > tbody > tr > td:first-child { flex: 0 0 auto; font-weight: 700; color: var(--color-primario) !important; }
table.modo-filas > tbody > tr > td:first-child * { color: var(--color-primario); }
/* Última columna (acciones): a la derecha */
table.modo-filas > tbody > tr > td:last-child { flex: 0 0 auto; margin-left: auto; }
table.modo-filas > tbody > tr > td:last-child::before { display: none; }
table.modo-filas > tbody > tr > td > .d-flex, table.modo-filas > tbody > tr > td > div { justify-content: flex-start !important; }
table.modo-filas > tbody > tr > td:last-child > .d-flex, table.modo-filas > tbody > tr > td:last-child > div { justify-content: flex-end !important; }
/* Filas de mensaje ("sin resultados") */
table.modo-filas > tbody > tr > td[colspan]:only-child { flex: 1 1 100%; text-align: center !important; color: var(--texto-2) !important; font-weight: 400; }
table.modo-filas > tbody > tr > td[colspan]:only-child::before { display: none; }
table.modo-filas > tbody > tr:has(> td[colspan]:only-child) { border-left-width: 1px !important; border-radius: var(--radio) !important; }
table.modo-filas > tfoot > tr { display: flex; justify-content: flex-end; gap: 16px; }
table.modo-filas > tfoot > tr > td { display: block; border: 0 !important; padding: 4px 0 !important; }
/* Formularios en tabla (líneas de factura...): campo a todo el ancho de su hueco */
table.modo-filas > tbody > tr > td:has(input, select, textarea) { flex: 1 1 160px; }
table.modo-filas > tbody > tr > td:has(> label, > .form-label, > div > label)::before { display: none; }
table.modo-filas td .badge, table.modo-tarjetas td .badge { white-space: normal; text-align: left; max-width: 100%; }

/* =============================================================================
   TABLAS COMPACTAS (PC / tableta cuando no cabe todo): una fila por registro,
   textos largos acortados con "…" (el texto completo aparece al pasar el ratón)
   ============================================================================= */
table.una-linea, table.modo-compacta { width: 100% !important; min-width: 0 !important; table-layout: auto; }
.table-responsive:has(> table.una-linea) { overflow: visible !important; }
table.modo-compacta > :not(caption) > * > * { padding: 8px 8px !important; font-size: 12.5px; }
table.modo-compacta > thead > tr > th { white-space: normal !important; font-size: 10.5px !important; line-height: 1.25; vertical-align: bottom; }
table.una-linea > tbody > tr > td { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.una-linea > tbody > tr > td * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Varios datos en una celda (nombre y teléfono...): seguidos en la misma línea */
table.una-linea > tbody > tr > td > div, table.una-linea > tbody > tr > td > small,
table.una-linea > tbody > tr > td > span:not(.badge), table.una-linea > tbody > tr > td > strong { display: inline; }
table.una-linea > tbody > tr > td > br { display: none; }
table.una-linea > tbody > tr > td > :is(div, small, span:not(.badge), strong) + :is(div, small, span:not(.badge), strong)::before { content: ' · '; color: var(--texto-3); }
table.una-linea > tbody > tr > td > .d-flex { display: flex !important; }
table.una-linea .badge { display: inline-block; max-width: 100%; vertical-align: middle; }
/* Lo que nunca se recorta: primera columna (nº), botones/acciones y campos */
table.una-linea > tbody > tr > td:first-child, table.una-linea > tbody > tr > td:last-child,
table.una-linea > tbody > tr > td:has(.btn), table.una-linea > tbody > tr > td:has(input, select, textarea) {
    max-width: none; width: 1%; overflow: visible;
}
table.una-linea > tbody > tr > td:first-child *, table.una-linea > tbody > tr > td:last-child *,
table.una-linea > tbody > tr > td:has(.btn) * { overflow: visible; text-overflow: clip; }
table.una-linea > tbody > tr > td > .d-flex { flex-wrap: nowrap !important; gap: 4px !important; }
table.una-linea > tbody > tr > td > .d-flex > * { flex-shrink: 0; }
table.modo-compacta .btn { padding: 4px 9px; font-size: 12px; }
table .col-oculta { display: none !important; }
/* Celdas intermedias con texto y botón: se recorta el texto, el botón se ve entero */
table.una-linea > tbody > tr > td:has(.btn):not(:first-child):not(:last-child) { max-width: 0; width: auto; overflow: hidden; }
table.una-linea > tbody > tr > td:has(.btn):not(:first-child):not(:last-child) > :not(.btn):not(.d-flex) { overflow: hidden; text-overflow: ellipsis; display: block; }

/* Totales que la página ya muestra aparte en el móvil (no repetirlos en modo tarjeta) */
table.modo-tarjetas > tfoot.tfoot-pc { display: none !important; }
table.una-linea > tbody > tr > td .d-block:not(.btn) { display: inline !important; }
table.una-linea > tbody > tr > td .badge.d-block, table.una-linea > tbody > tr > td .badge { display: inline-block !important; margin-left: 4px; margin-top: 0 !important; }
table.una-linea > tbody > tr > td > .badge:first-child { margin-left: 0; }

/* =============================================================================
   MENÚ LATERAL POR GRUPOS
   Desplegado: se ven todos los grupos con sus opciones.
   Plegado: un icono por grupo; al pasar el ratón o pulsar se abre un panel con sus opciones.
   ============================================================================= */
.app-menu-grupo-boton { display: none; }
body.menu-plegado .app-menu-nav { overflow: visible; padding-top: 14px; }
body.menu-plegado .app-menu-grupo { position: relative; margin-bottom: 4px; }
body.menu-plegado .app-menu-grupo-boton {
    display: flex; align-items: center; justify-content: center; position: relative;
    width: 44px; height: 44px; margin: 0 auto; border: 0; border-radius: 10px;
    background: transparent; color: var(--texto-2); cursor: pointer;
}
body.menu-plegado .app-menu-grupo-boton svg { width: 21px; height: 21px; }
body.menu-plegado .app-menu-grupo-boton:hover, body.menu-plegado .app-menu-grupo.abierto .app-menu-grupo-boton { background: #eef2f6; color: var(--color-primario); }
body.menu-plegado .app-menu-grupo.activo .app-menu-grupo-boton { background: var(--color-primario); color: #fff; }
body.menu-plegado .app-menu-grupo-boton .app-menu-contador { position: absolute; top: 2px; right: 0; margin: 0; min-width: 17px; height: 17px; font-size: 10px; padding: 0 4px; }
/* Panel lateral con las opciones del grupo */
body.menu-plegado .app-menu-grupo-lista {
    display: none; position: fixed; left: calc(var(--ancho-menu-plegado) + 6px); z-index: 1060;
    width: 230px; padding: 8px; background: var(--superficie); border: 1px solid var(--borde);
    border-radius: 12px; box-shadow: var(--sombra-elevada);
}
body.menu-plegado .app-menu-grupo.abierto .app-menu-grupo-lista { display: block; }
body.menu-plegado .app-menu-grupo-lista .app-menu-seccion { display: block !important; padding: 6px 10px 8px; color: var(--color-primario); font-size: 11.5px; }
body.menu-plegado .app-menu-grupo-lista .app-menu-enlace { justify-content: flex-start !important; padding: 0 10px !important; }
body.menu-plegado .app-menu-grupo-lista .app-texto { display: inline !important; }
body.menu-plegado .app-menu-grupo-lista .app-menu-contador { position: static; margin: 0 0 0 auto; }
/* En el móvil el menú siempre se ve completo (sin grupos plegados) */
@media (max-width: 991.98px) {
    body.menu-plegado .app-menu-grupo-boton { display: none; }
    body.menu-plegado .app-menu-grupo-lista { display: block; position: static; width: auto; padding: 0; border: 0; box-shadow: none; }
}

/* =============================================================================
   PANELES: tarjetas de cifras, bloques y listas (panel del cliente y del taller)
   ============================================================================= */
.panel-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.panel-cifra { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra); min-width: 0; text-decoration: none; color: inherit; display: block; }
a.panel-cifra:hover { border-color: var(--color-primario); }
.panel-cifra span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-2); }
.panel-cifra strong { display: block; font-size: 1.5rem; font-weight: 700; color: var(--texto); line-height: 1.25; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-cifra small { display: block; color: var(--texto-2); font-size: 12.5px; margin-top: 2px; }
.panel-cifra-oscura { background: var(--color-primario); border-color: var(--color-primario); }
.panel-cifra-oscura span, .panel-cifra-oscura small { color: #9fb6c8; }
.panel-cifra-oscura strong { color: #fff; }
.panel-cifra-aviso { background: #fff7e6; border-color: #f5c46b; }
.panel-cifra-aviso strong { color: #9a5b00; }
.panel-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.panel-rejilla > .card { margin-bottom: 0; overflow: hidden; }
.panel-rejilla .card-header, .panel-bloque .card-header { background: var(--color-primario) !important; color: #fff !important; border-bottom: 0 !important; font-weight: 600; padding: 10px 16px !important; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.panel-rejilla .card-header a, .panel-bloque .card-header a { color: #9fd3f3; font-size: 12.5px; font-weight: 500; text-decoration: none; }
.panel-rejilla .card-header a:hover, .panel-bloque .card-header a:hover { color: #fff; }
.panel-lista { list-style: none; margin: 0; padding: 0; }
.panel-lista li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--borde); min-width: 0; }
.panel-lista li:last-child { border-bottom: 0; }
.panel-lista a { color: inherit; text-decoration: none; }
.panel-lista a:hover { color: var(--color-acento); }
.panel-lista .principal { min-width: 0; }
.panel-lista .principal strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-lista .principal small { display: block; color: var(--texto-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-lista .lado { flex-shrink: 0; text-align: right; }
.panel-vacio { padding: 18px 16px; color: var(--texto-2); }
.panel-barra { height: 6px; border-radius: 999px; background: #e6ecf2; overflow: hidden; margin-top: 6px; }
.panel-barra > i { display: block; height: 100%; background: var(--color-acento); border-radius: 999px; }
@media (max-width: 991.98px) { .panel-rejilla { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .panel-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .panel-cifra strong { font-size: 1.2rem; } }

/* Permisos de usuario: grupos como el menú, un permiso por fila */
.permisos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.permisos-grupo { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--superficie); }
.permisos-grupo-cabecera { background: var(--color-primario); color: #fff; padding: 8px 12px; font-weight: 600; }
.permisos-grupo-cabecera .form-check-label { color: #fff; font-weight: 600; }
.permisos-grupo-cabecera .form-check-input { border-color: rgba(255,255,255,.6); }
.permisos-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--borde); }
.permisos-fila .form-check { min-width: 0; }
.permisos-fila .form-check-label { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.permisos-fila .sel-nivel { width: 118px; flex-shrink: 0; }

/* =============================================================================
   MENÚ LATERAL: logo según el menú esté abierto o plegado, y secciones plegables
   ============================================================================= */
.app-menu-marca .logo-icono { display: none; }
@media (min-width: 992px) {
    body.menu-plegado .app-menu-marca .logo-grande { display: none; }
    body.menu-plegado .app-menu-marca .logo-icono { display: block; width: 42px; height: 42px; max-width: none; max-height: none; object-fit: contain; }
}

/* El título de cada sección abre y cierra sus opciones */
button.app-menu-seccion {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: 0; text-align: left; cursor: pointer; border-radius: 6px;
}
button.app-menu-seccion:hover { color: var(--color-primario); background: var(--superficie-2); }
button.app-menu-seccion .flecha { width: 14px; height: 14px; transition: transform .15s ease; flex-shrink: 0; }
.app-menu-grupo.cerrado button.app-menu-seccion .flecha { transform: rotate(-90deg); }
.app-menu-seccion .contador-cerrado { display: none; margin-left: auto; margin-right: 6px; }
.app-menu-grupo.cerrado .app-menu-seccion .contador-cerrado { display: inline-flex; }
body:not(.menu-plegado) .app-menu-grupo.cerrado .app-menu-enlace { display: none; }
@media (max-width: 991.98px) {
    .app-menu-grupo.cerrado .app-menu-enlace { display: none; }
    .app-menu-grupo.cerrado .app-menu-seccion .contador-cerrado { display: inline-flex; }
}
/* En el menú plegado el título es solo una etiqueta del panel */
@media (min-width: 992px) {
    body.menu-plegado button.app-menu-seccion { cursor: default; background: none; }
    body.menu-plegado button.app-menu-seccion .flecha, body.menu-plegado .app-menu-seccion .contador-cerrado { display: none !important; }
}
@media (max-width: 991.98px) { body.menu-plegado button.app-menu-seccion { display: flex; } }

/* Estados (etiquetas solas en su celda): siempre enteros en PC; se acortan el cliente, el equipo… */
table.una-linea > tbody > tr > td:has(> .badge:only-child) { max-width: none; width: 1%; overflow: visible; }
table.una-linea > tbody > tr > td:has(> .badge:only-child) > .badge { overflow: visible; text-overflow: clip; max-width: none; }
table.modo-compacta .badge-status { font-size: 12px !important; padding: 5px 9px !important; }
/* Si falta sitio, el estado se parte en dos líneas antes que cortarse */
table.modo-compacta > tbody > tr > td:has(> .badge:only-child) { min-width: 118px; width: auto; }
table.modo-compacta > tbody > tr > td:has(> .badge:only-child) > .badge { white-space: normal !important; text-align: left; line-height: 1.25; }
table.modo-compacta > tbody > tr > td:has(> .badge:only-child) > .badge * { white-space: normal; }

/* Responder a un presupuesto: aceptar en verde y rechazar en rojo */
.btn-aceptar, .btn-rechazar { color: #fff !important; border: 1px solid transparent !important; }
.btn-aceptar { background: #16a34a !important; border-color: #16a34a !important; }
.btn-rechazar { background: #dc2626 !important; border-color: #dc2626 !important; }
.btn-aceptar:hover, .btn-aceptar:focus-visible, .btn-aceptar:active { background: #15803d !important; border-color: #15803d !important; color: #fff !important; }
.btn-rechazar:hover, .btn-rechazar:focus-visible, .btn-rechazar:active { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important; }
.btn-aceptar:disabled { background: #86c99e !important; border-color: #86c99e !important; opacity: 1; }

/* Artículos por debajo del stock mínimo */
.table-admin tr.fila-bajo-minimo > td { background: #fef2f2; }

/* =============================================================================
   COMPROBACIÓN DEL EQUIPO (entrada / salida) Y FIRMAS DEL CLIENTE
   ============================================================================= */
.ficha-contador.completo { background: var(--ok-suave); color: var(--ok); }
.ficha-garantia { font-weight: 600; }
.ficha-garantia.vigente { color: var(--ok); }
.ficha-garantia.caducada { color: var(--texto-3); }
.comp-rejilla { align-items: start; }
.comp-estado { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.comp-estado.pendiente { background: var(--aviso-suave); color: var(--aviso); }
.comp-meta { font-size: 12.5px; color: var(--texto-2); margin-bottom: 10px; }
.comp-cifras { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.comp-res { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.comp-res.ok { background: var(--ok-suave); color: var(--ok); }
.comp-res.falla { background: var(--error-suave); color: var(--error); }
.comp-res.nc { background: var(--aviso-suave); color: var(--aviso); }
.comp-res.na { background: var(--superficie-2); color: var(--texto-3); border: 1px solid var(--borde); }
.comp-lista { list-style: none; padding: 0; margin: 12px 0 0; border-top: 1px solid var(--borde); }
.comp-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--borde); font-size: 13.5px; }
.comp-lista li.es-ok > span:first-child { color: var(--texto-2); }
.comp-antes { color: var(--texto-3); font-size: 11.5px; white-space: nowrap; }
.comp-notas { margin-top: 10px; font-size: 13px; color: var(--texto-2); }
.comp-barra-herr { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.comp-barra-herr .btn svg, .comp-form .btn svg { vertical-align: -3px; }
.comp-progreso { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.comp-progreso-barra { flex: 1; height: 6px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.comp-progreso-barra span { display: block; height: 100%; width: 0; background: var(--color-primario); border-radius: 99px; transition: width .2s; }
.comp-progreso.completa .comp-progreso-barra span { background: var(--ok); }
.comp-progreso small { font-size: 12px; color: var(--texto-2); white-space: nowrap; }
.comp-filas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; }
.comp-fila { display: flex; flex-direction: column; gap: 9px; padding: 10px 12px; border: 1px solid var(--borde); border-left: 3px solid var(--borde); border-radius: 10px; background: var(--superficie); transition: border-color .15s, background .15s; }
.comp-fila:has(input[value="ok"]:checked) { border-left-color: var(--ok); }
.comp-fila:has(input[value="falla"]:checked) { border-left-color: var(--error); background: var(--error-suave); }
.comp-fila:has(input[value="nc"]:checked) { border-left-color: var(--aviso); }
.comp-fila:has(input[value="na"]:checked) { border-left-color: var(--texto-3); }
.comp-nombre { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; min-width: 0; line-height: 1.25; }
.comp-nombre small { display: block; color: var(--texto-3); font-size: 11.5px; font-weight: 400; }
.comp-ico { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--superficie-2); color: var(--texto-2); transition: background .15s, color .15s; }
.comp-fila:has(input[value="ok"]:checked) .comp-ico { background: var(--ok-suave); color: var(--ok); }
.comp-fila:has(input[value="falla"]:checked) .comp-ico { background: var(--error); color: #fff; }
.comp-fila:has(input[value="nc"]:checked) .comp-ico { background: var(--aviso-suave); color: var(--aviso); }
.comp-opciones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.comp-op { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 600; padding: 6px 2px; cursor: pointer; color: var(--texto-2); background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; user-select: none; white-space: nowrap; margin: 0; transition: background .12s, color .12s, border-color .12s; }
.comp-op svg { opacity: .75; }
.comp-op:hover { background: var(--superficie-2); }
.btn-check:focus-visible + .comp-op { outline: 2px solid var(--color-primario); outline-offset: 1px; }
.btn-check:checked + .comp-op svg { opacity: 1; }
.btn-check:checked + .comp-op.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-check:checked + .comp-op.falla { background: var(--error); border-color: var(--error); color: #fff; }
.btn-check:checked + .comp-op.nc { background: var(--aviso); border-color: var(--aviso); color: #fff; }
.btn-check:checked + .comp-op.na { background: var(--texto-2); border-color: var(--texto-2); color: #fff; }
.comp-lista .comp-nombre { font-weight: 500; }
.comp-lista .comp-ico { width: 28px; height: 28px; border-radius: 8px; }
.comp-lista li.es-ok .comp-ico { background: var(--ok-suave); color: var(--ok); }
.comp-res svg { margin-right: 3px; }
@media (max-width: 575.98px) {
    .comp-filas { grid-template-columns: 1fr; }
    .comp-op { padding: 8px 2px; }
}
.firma-caja { border: 1px solid var(--borde); border-radius: 10px; padding: 12px; }
.firma-imagen { display: block; width: 100%; max-width: 360px; height: auto; border: 1px solid var(--borde); border-radius: 8px; background: #fff; margin-bottom: 6px; }
.firma-vacia { border: 1px dashed var(--borde-fuerte); border-radius: 8px; padding: 26px 10px; text-align: center; color: var(--texto-3); font-size: 13px; }
.firma-lienzo-caja { position: relative; height: 240px; border: 1px solid var(--borde-fuerte); border-radius: 10px; background: #fff; overflow: hidden; }
.firma-lienzo-caja canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.firma-guia { position: absolute; left: 16px; right: 16px; bottom: 44px; border-top: 1px solid var(--borde-fuerte); font-size: 11px; color: var(--texto-3); padding-top: 3px; pointer-events: none; }
.firma-lienzo-caja.firmado .firma-guia { display: none; }
.comp-plegable { margin-top: 10px; }
.comp-plegable summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--color-primario); padding: 4px 0; }
.comp-plegable[open] summary { margin-bottom: 2px; }
.comp-tarjeta .card-header small { color: rgba(255, 255, 255, .7) !important; }
.ficha-rejilla > .comp-portal { grid-column: 1 / -1; }

/* =============================================================================
   LISTADOS (diseño común: reparaciones, clientes, artículos, facturas…)
   Cabecera de página, pestañas con contador, barra de filtros, etiquetas de estado,
   tabla que se adapta al hueco que deja el menú y filas compactas en el móvil.
   ============================================================================= */
.pagina-cabecera { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pagina-cabecera h1 { font-size: 1.45rem; font-weight: 700; margin: 0; color: var(--texto); }
.pagina-cabecera p { margin: 2px 0 0; color: var(--texto-2); font-size: 13.5px; }
.pagina-acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.pestanas-lista { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); margin-bottom: 14px; overflow-x: auto; scrollbar-width: thin; }
.pestanas-lista a { padding: 9px 14px; font-size: 14px; font-weight: 600; color: var(--texto-2); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pestanas-lista a:hover { color: var(--color-primario); }
.pestanas-lista a.activa { color: var(--color-primario); border-bottom-color: var(--color-primario); }
.pestanas-lista a small { background: #eef2f6; color: var(--texto-2); border-radius: 999px; padding: 1px 7px; font-size: 11.5px; margin-left: 4px; }
.pestanas-lista a.activa small { background: var(--color-primario); color: #fff; }

.filtros-barra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px; margin-bottom: 12px; box-shadow: var(--sombra); }
.buscador-campo { position: relative; flex: 1 1 280px; margin: 0; }
.buscador-campo svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--texto-3); pointer-events: none; }
.buscador-campo input { width: 100%; border: 1px solid var(--borde-fuerte); border-radius: 8px; padding: 8px 10px 8px 34px; font-size: 14px; background: #fff; }
.buscador-campo input:focus { outline: none; border-color: var(--color-acento); box-shadow: 0 0 0 3px var(--color-acento-suave); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; border: 1px solid var(--borde-fuerte); background: #fff; border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 600; color: var(--texto-2); white-space: nowrap; text-decoration: none; line-height: 1.3; }
.chip:hover { border-color: var(--color-primario); color: var(--color-primario); }
.chip.activa { background: var(--color-primario); color: #fff; border-color: var(--color-primario); }
.chip b { font-weight: 700; margin-left: 4px; opacity: .75; }

/* Etiquetas de estado: punto de color (trabajo) o documento con borde (presupuesto) */
.estado { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.35; }
.estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.estado.azul { background: var(--info-suave); color: var(--info); }
.estado.verde { background: var(--ok-suave); color: var(--ok); }
.estado.ambar { background: var(--aviso-suave); color: var(--aviso); }
.estado.rojo { background: var(--error-suave); color: var(--error); }
.estado.gris { background: #f1f3f5; color: var(--texto-2); }
.estado.oscuro { background: #e5e7eb; color: #1f2937; }
.estado.presu { background: #fff; border: 1px solid currentColor; padding: 2px 9px 2px 7px; }
.estado.presu::before { width: 11px; height: 11px; border-radius: 0; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Tabla de listado: se adapta al hueco real (menú abierto o plegado), no al ancho de la ventana */
.listado { container-type: inline-size; }
.tabla-lista { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.tabla-lista table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: auto; margin: 0; }
.tabla-lista th { background: var(--color-primario); color: #fff; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; padding: 10px 14px; text-align: left; white-space: nowrap; }
.tabla-lista td { padding: 11px 14px; border-top: 1px solid var(--borde); vertical-align: middle; white-space: nowrap; color: var(--texto); }
.tabla-lista tbody tr[data-href] { cursor: pointer; }
.tabla-lista tbody tr:hover td { background: #f7fafc; }
.tabla-lista .cod { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 700; color: var(--color-primario); }
.tabla-lista .cod a { color: inherit; text-decoration: none; }
.tabla-lista td.dos strong, .tabla-lista td.dos small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabla-lista td.dos strong { font-weight: 600; }
.tabla-lista td.dos small { color: var(--texto-2); font-size: 12.5px; }
.tabla-lista td.encoge { max-width: 0; width: 30%; }
.tabla-lista .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tabla-lista th.num { text-align: right; }
.tabla-lista .flecha { color: var(--texto-3); text-align: right; width: 28px; font-size: 18px; }
.tabla-lista .acciones-fila { text-align: right; }
.tabla-lista .vacio { text-align: center; color: var(--texto-2); padding: 28px 14px; white-space: normal; }
.tabla-lista tfoot td { background: var(--superficie-2); font-weight: 600; }
.lista-dias { font-weight: 600; color: var(--texto-2); }
.lista-dias.alerta { color: var(--error); }
.tabla-lista .solo-estrecho { display: none !important; }
.pie-lista { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--borde); font-size: 13px; color: var(--texto-2); background: var(--superficie-2); }
.paginacion { display: flex; gap: 4px; flex-wrap: wrap; }
.paginacion a, .paginacion span { min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid var(--borde); background: #fff; font-weight: 600; color: var(--texto-2); text-decoration: none; }
.paginacion .activa { background: var(--color-primario); color: #fff; border-color: var(--color-primario); }
.filas-compactas { display: none; }
@container (max-width: 1060px) {
    .tabla-lista .ocultar-medio { display: none !important; }
    .tabla-lista .solo-estrecho { display: block !important; }
}
@container (max-width: 820px) {
    .tabla-lista td, .tabla-lista th { padding-left: 9px; padding-right: 9px; }
    .tabla-lista table { font-size: 13px; }
    .tabla-lista .ocultar-estrecho, .tabla-lista .flecha { display: none !important; }
}
@container (max-width: 640px) {
    .listado .tabla-lista { display: none; }
    .listado .filas-compactas { display: block; }
}

/* Filas compactas (móvil): código e importe, título, dos líneas de detalle y etiquetas */
.fila-compacta { display: block; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; color: inherit; text-decoration: none; }
.fila-compacta:hover { border-color: var(--borde-fuerte); color: inherit; }
.fila-compacta .l1 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.fila-compacta .cod { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-weight: 700; color: var(--color-primario); font-size: 14px; }
.fila-compacta .imp { font-weight: 700; font-variant-numeric: tabular-nums; }
.fila-compacta .l2 { font-size: 14.5px; font-weight: 600; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-compacta .l3 { font-size: 12.5px; color: var(--texto-2); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-compacta .l3 .alerta { color: var(--error); font-weight: 600; }
.fila-compacta .l4 { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fila-compacta .estado { font-size: 12px; }
.filas-compactas .pie-lista { border: 1px solid var(--borde); border-radius: 10px; }
@media (max-width: 575.98px) {
    .filtros-barra .chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; scrollbar-width: none; }
    .filtros-barra .chips::-webkit-scrollbar { display: none; }
    .aviso-destacado .card-header { flex-wrap: wrap; gap: 8px; }
    .aviso-destacado .panel-lista li { flex-wrap: wrap; }
    .aviso-destacado .panel-lista .lado { width: 100%; justify-content: flex-start !important; }
    .pagina-cabecera .pagina-acciones { width: 100%; }
    .pagina-cabecera .pagina-acciones .btn { flex: 1 1 auto; }
}

/* Ficha de cliente */
.ficha-nombre { font-size: 1.45rem; font-weight: 700; margin: 0; color: #fff; overflow-wrap: anywhere; }
.etiqueta-clara { background: rgba(255,255,255,.14); color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ficha-contacto { display: flex; flex-wrap: wrap; gap: 6px 16px; color: #cfe0ec; font-size: 13.5px; margin-top: 6px; }
.ficha-contacto a { color: #cfe0ec; text-decoration: none; }
.ficha-contacto a:hover { color: #fff; text-decoration: underline; }
.ficha-sub-dato { font-weight: 400; color: #9fb6c8; font-size: .8em; }
.ficha-debe { color: #fcd34d !important; }

/* Desplegable de resultados del buscador de artículos (ventanas de presupuesto, pedidos…) */
.search-results-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--borde-fuerte); border-radius: 0 0 8px 8px; box-shadow: var(--sombra-elevada); max-height: 240px; overflow-y: auto; z-index: 1050; display: none; }
.search-item-option { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--borde); font-size: 14px; }
.search-item-option:hover { background: var(--color-acento-suave); color: var(--color-primario); }

/* =============================================================================
   NUEVA REPARACIÓN (una sola página con resumen lateral)
   ============================================================================= */
.nr-dos-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.nr-resumen { position: sticky; top: calc(var(--alto-barra) + 16px); }
.nr-paso { display: inline-flex; align-items: center; gap: 10px; }
.nr-paso i { width: 26px; height: 26px; border-radius: 50%; background: var(--color-primario); color: #fff; font-style: normal; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.nr-paso.hecho i { background: var(--ok); }
.nr-bloque { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; }
.nr-sugerencias { position: absolute; left: 0; right: 0; top: 100%; z-index: 1060; background: #fff; border: 1px solid var(--borde-fuerte); border-radius: 0 0 10px 10px; box-shadow: var(--sombra-elevada); display: none; overflow: hidden; }
.nr-sugerencia { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--borde); color: var(--texto); text-decoration: none; font-size: 14px; }
.nr-sugerencia small { color: var(--texto-2); white-space: nowrap; }
.nr-sugerencia.activa, .nr-sugerencia:hover { background: var(--color-acento-suave); color: var(--color-primario); }
.nr-sugerencia-nueva { color: var(--color-acento); font-weight: 600; border-bottom: 0; }
.nr-tipos { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.nr-tipo { border: 1px solid var(--borde-fuerte); border-radius: 10px; padding: 10px 4px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--texto-2); background: #fff; cursor: pointer; margin: 0; user-select: none; }
.nr-tipo svg { display: block; margin: 0 auto 5px; width: 22px; height: 22px; }
.nr-tipo:hover { border-color: var(--color-primario); color: var(--color-primario); }
.btn-check:checked + .nr-tipo { border-color: var(--color-primario); background: var(--color-primario); color: #fff; }
.btn-check:focus-visible + .nr-tipo, .btn-check:focus-visible + .nr-chip, .btn-check:focus-visible + .nr-opcion { outline: 2px solid var(--color-acento); outline-offset: 2px; }
.nr-chip, .nr-opcion { display: inline-flex; align-items: center; border: 1px solid var(--borde-fuerte); border-radius: 8px; padding: 6px 11px; font-size: 13px; background: #fff; color: var(--texto); cursor: pointer; margin: 0; user-select: none; }
.nr-chip:hover, .nr-opcion:hover { border-color: var(--color-acento); }
.btn-check:checked + .nr-chip, .btn-check:checked + .nr-opcion { background: var(--color-acento-suave); border-color: var(--color-acento); color: #0b4f7a; font-weight: 600; }
button.nr-chip { font-family: inherit; }
.nr-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.nr-foto { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; margin: 0; }
.nr-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nr-foto button { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; }
.nr-foto-nueva { border: 1.5px dashed var(--borde-fuerte); background: var(--superficie-2); color: var(--texto-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 600; }
.nr-foto-nueva svg { width: 26px; height: 26px; }
.nr-foto-nueva:hover { border-color: var(--color-acento); color: var(--color-acento); }
.nr-comprobacion { border: 1px solid var(--borde); border-radius: 10px; padding: 12px; }
canvas.patron-canvas { background: #fff; border: 2px solid var(--borde-fuerte); border-radius: 10px; cursor: crosshair; touch-action: none; }
@media (max-width: 991.98px) {
    .nr-dos-col { grid-template-columns: 1fr; }
    .nr-resumen { position: static; }
    .nr-tipos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =============================================================================
   CONFIGURACIÓN: menú lateral propio con todos los apartados
   ============================================================================= */
.config-marco { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.config-subnav { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 8px; position: sticky; top: calc(var(--alto-barra) + 16px); box-shadow: var(--sombra); }
.config-subnav h6 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); margin: 12px 10px 4px; font-weight: 700; }
.config-subnav h6:first-child { margin-top: 6px; }
.config-subnav a { display: block; padding: 7px 10px; border-radius: 7px; font-size: 14px; color: var(--texto-2); text-decoration: none; }
.config-subnav a:hover { background: var(--superficie-2); color: var(--texto); }
.config-subnav a.activa { background: var(--color-acento-suave); color: var(--color-primario); font-weight: 600; }
.config-contenido { min-width: 0; }
@media (max-width: 1199.98px) {
    .config-marco { grid-template-columns: 1fr; gap: 12px; }
    .config-subnav { position: static; display: flex; gap: 4px; overflow-x: auto; padding: 6px; scrollbar-width: thin; }
    .config-subnav h6 { display: none; }
    .config-subnav a { white-space: nowrap; }
}
.ancla-config { scroll-margin-top: calc(var(--alto-barra) + 16px); }

/* =============================================================================
   BUSCADOR GLOBAL (lupa de la barra superior o tecla «/»)
   ============================================================================= */
.app-buscar-boton { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto-2); font-size: 13.5px; min-width: 220px; cursor: pointer; }
.app-buscar-boton:hover { border-color: var(--borde-fuerte); color: var(--texto); }
.app-buscar-boton kbd, .buscador-global kbd { margin-left: auto; font-family: inherit; font-size: 11.5px; color: var(--texto-2); background: #fff; border: 1px solid var(--borde-fuerte); border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; box-shadow: none; }
@media (max-width: 767.98px) { .app-buscar-boton { min-width: 0; padding: 0 10px; } .app-buscar-boton .app-texto, .app-buscar-boton kbd { display: none; } }
.buscador-global { position: fixed; inset: 0; z-index: 2000; background: rgba(15, 23, 42, .45); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; }
.buscador-global[hidden] { display: none; }
.buscador-global-caja { width: 100%; max-width: 680px; background: #fff; border-radius: 14px; box-shadow: var(--sombra-elevada); overflow: hidden; display: flex; flex-direction: column; max-height: 75vh; }
.buscador-global-campo { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--borde); color: var(--texto-3); }
.buscador-global-campo input { flex: 1; border: 0; outline: 0; font-size: 17px; color: var(--texto); background: transparent; min-width: 0; }
.buscador-global-resultados { overflow-y: auto; padding-bottom: 6px; }
.buscador-global-ayuda { padding: 18px 16px; color: var(--texto-2); font-size: 14px; }
.buscador-global-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); font-weight: 700; padding: 12px 16px 4px; }
.buscador-global-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 16px; color: var(--texto); text-decoration: none; }
.buscador-global-item .izq { min-width: 0; }
.buscador-global-item strong { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscador-global-item small { display: block; color: var(--texto-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buscador-global-item .lado { color: var(--texto-2); white-space: nowrap; flex-shrink: 0; }
.buscador-global-item.sel { background: var(--color-acento-suave); color: var(--color-primario); }
body.buscando { overflow: hidden; }

/* Títulos de página de las pantallas que aún usan su propia cabecera (mismo aspecto que .pagina-cabecera) */
.titulo-pagina { font-size: 1.45rem; font-weight: 700; margin: 0; color: var(--texto); }
.titulo-pagina + small { display: block; margin-top: 2px; font-size: 13.5px; }

/* Filtros en desplegable (barra de filtros de los listados) */
.filtro-desplegable { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--texto-2); font-weight: 600; }
.filtro-desplegable select { width: auto; min-width: 150px; max-width: 260px; font-weight: 500; color: var(--texto); }
@media (max-width: 575.98px) {
    .filtro-desplegable { flex: 1 1 100%; }
    .filtro-desplegable span { min-width: 92px; }
    .filtro-desplegable select { flex: 1; max-width: none; }
}

/* Asistente de nueva reparación: barra de pasos, un paso a la vez */
.nr-asistente { max-width: 980px; margin: 0 auto; }
.nr-pasos { display: flex; list-style: none; padding: 0; margin: 0 0 14px; gap: 6px; counter-reset: paso; }
.nr-pasos li { flex: 1 1 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--borde); color: var(--texto-3); font-size: 13.5px; font-weight: 600; min-width: 0; cursor: default; }
.nr-pasos li i { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 12.5px; background: var(--superficie-2); border: 1px solid var(--borde-fuerte); color: var(--texto-2); }
.nr-pasos li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nr-pasos li.accesible { cursor: pointer; color: var(--texto-2); }
.nr-pasos li.hecho i { background: var(--ok); border-color: var(--ok); color: #fff; }
.nr-pasos li.actual { border-color: var(--color-primario); color: var(--color-primario); box-shadow: 0 0 0 1px var(--color-primario) inset; }
.nr-pasos li.actual i { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.nr-panel[hidden] { display: none; }
.nr-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
@media (max-width: 767.98px) {
    .nr-pasos li { justify-content: center; padding: 8px 4px; }
    .nr-pasos li span { display: none; }
    .nr-pasos li.actual span { display: inline; }
    .nr-pasos li.actual { flex: 3 1 0; }
    .nr-nav .btn { flex: 1 1 auto; }
}
.nr-sugerencias { max-height: 340px; overflow-y: auto; }
.nr-clave { text-align: center; }
.nr-clave #box_seg_pin { max-width: 360px; margin: 0 auto; }
.nr-clave canvas.patron-canvas { width: 260px; height: 260px; }
.nr-condiciones { max-height: 240px; overflow-y: auto; white-space: pre-wrap; font-size: 13px; line-height: 1.55; color: var(--texto-2); background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 8px; padding: 12px 14px; }

/* MENSAJES A CLIENTES (configuración) */
.msj-rejilla { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.msj-lista { padding: 8px; }
.msj-lista h6 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); margin: 10px 8px 4px; }
.msj-lista a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; color: var(--texto); text-decoration: none; }
.msj-lista a:hover { background: var(--superficie-2); }
.msj-lista a.activa { background: var(--color-primario); color: #fff; }
.msj-lista a small { font-size: 11px; opacity: .7; }
.msj-vista { white-space: pre-wrap; font-size: 14px; line-height: 1.5; }
.msj-vista.whatsapp { background: #e7f8d9; color: #111b21; border-radius: 4px 12px 12px 12px; padding: 10px 12px; max-width: 460px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.msj-vista.correo { border: 1px solid var(--borde); border-radius: 10px; padding: 14px 16px; white-space: normal; }
.msj-vista.correo p { margin: 8px 0 0; white-space: pre-wrap; }
.msj-asunto { font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid var(--borde); }
button.chip { border: 1px solid var(--borde); background: var(--superficie); font-family: ui-monospace, monospace; font-size: 12px; }
@media (max-width: 767.98px) { .msj-rejilla { grid-template-columns: 1fr; } }

/* Técnico asignado (cabecera de la ficha de reparación) */
.ficha-tecnico { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.ficha-tecnico label { margin: 0; }
.ficha-tecnico select { background: transparent; color: inherit; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; padding: 1px 6px; font: inherit; font-weight: 600; cursor: pointer; }
.ficha-tecnico select option { color: #0f172a; }
.ficha-lista li.ficha-pieza { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* RECUENTO DE INVENTARIO */
.recuento-campo { width: 90px; margin-left: auto; text-align: right; }
.recuento-tabla tr.rec-mas td.recuento-dif { color: var(--ok); font-weight: 700; }
.recuento-tabla tr.rec-menos td.recuento-dif { color: var(--error); font-weight: 700; }
.recuento-tabla tr.rec-igual td.recuento-dif { color: var(--texto-3); }
.recuento-tabla tr.rec-menos { background: var(--error-suave); }
.recuento-pie { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 -4px 14px rgba(15, 23, 42, .06); }
.recuento-pie input { flex: 1 1 200px; }
@media print {
    .no-imprimir, .pagina-acciones, .filas-compactas { display: none !important; }
    .listado .tabla-lista { display: block !important; }
    .recuento-campo { border: 0; border-bottom: 1px solid #000; border-radius: 0; }
}

/* Portal: invitación a dejar reseña en Google */
.resena-aviso { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.resena-aviso > div { flex: 1 1 220px; }
.resena-aviso strong { display: block; }
.resena-aviso div span { font-size: 13px; color: var(--texto-2); }
.resena-aviso .resena-estrellas { color: #f5b301; font-size: 20px; letter-spacing: 2px; }
.msj-codigo { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; font-size: 12px; white-space: pre-wrap; margin: 6px 0; }