/* =============================================================
   Sistema Car Wash - Estilos
   ============================================================= */

:root {
    --primary: #F8CC10;
    --primary-dark: #D9AC00;
    --primary-light: #FEF7DC;
    --accent: #2C7BBA;
    --ink: #040607;
    --muted: #64748b;
    --bg: #f5f3ec;
    --card: #ffffff;
    --border: #e6e3d9;
    --success: #16a34a;
    --success-bg: #dcfce7;
    --danger: #dc2626;
    --danger-bg: #fee2e2;
    --warning: #d97706;
    --warning-bg: #fef3c7;
    --radius: 12px;
    --shadow: 0 1px 3px rgba(4, 6, 7, .08), 0 4px 16px rgba(4, 6, 7, .06);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.5;
}

h1, h2, h3 { margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--muted); font-size: .9rem; }

/* ---------- Login ---------- */
.login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(900px 500px at 15% -10%, rgba(248, 204, 16, .18), transparent 60%),
        radial-gradient(700px 500px at 110% 110%, rgba(44, 123, 186, .16), transparent 60%),
        linear-gradient(135deg, #ffffff 0%, #eef4f9 100%);
    padding: 1rem;
}

.login-card {
    background: var(--card);
    border: 2.5px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2.5rem 2rem;
    width: 100%;
    max-width: 400px;
}

.login-logo { text-align: center; }
.logo-mark { font-size: 3rem; display: inline-block; }
.login-logo-img {
    width: 108px;
    height: 108px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: var(--shadow);
}

.login-title {
    text-align: center;
    font-size: 1.5rem;
    margin: .5rem 0 .25rem;
}

.login-subtitle {
    text-align: center;
    color: var(--muted);
    margin-bottom: 1.5rem;
}

/* ---------- Topbar ---------- */
.topbar {
    background: linear-gradient(135deg, #143E63 0%, var(--accent) 100%);
    color: #fff;
    padding: .85rem 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    font-weight: 700;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.brand-logo {
    height: 34px;
    width: 34px;
    border-radius: 8px;
    object-fit: cover;
}

.brand-role {
    background: var(--primary);
    color: #1c1600;
    font-size: .68rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 999px;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: .35rem;
    letter-spacing: .04em;
}

.topbar-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.user-chip {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-size: .85rem;
    color: #fff;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.chip-link {
    background: var(--primary);
    color: #1c1600;
    font-weight: 700;
    margin-left: .45rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    white-space: nowrap;
    text-decoration: none;
}
.chip-link:hover { background: var(--primary-dark); color: #100c00; text-decoration: none; }

/* Botones del topbar: contorno blanco para destacarlos del fondo azul */
.topbar .btn-ghost {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
}
.topbar .btn-ghost:hover:not(:disabled) { background: #fff; color: var(--accent); }

/* ---------- Formulario: rectángulos internos con borde azul ---------- */
#service-form input,
#service-form select,
#service-form textarea {
    border: 2px solid var(--accent);
}
#service-form .addons-box {
    border: 2px solid var(--accent);
}
#service-form .price-preview {
    border: 2px solid var(--accent);
}

/* ---------- Layout ---------- */
.container {
    max-width: 1100px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}

.panel {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ---------- Forms ---------- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-grid > * { min-width: 0; }

.form-group { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.form-group-wide { grid-column: 1 / -1; }

.form-group label {
    font-size: .83rem;
    font-weight: 600;
    color: var(--muted);
}

input, select, textarea {
    border: 2px solid var(--accent);
    border-radius: 8px;
    padding: .6rem .75rem;
    font-size: .95rem;
    font-family: inherit;
    background: #fff;
    color: var(--ink);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(248, 204, 16, .18);
}

/* ---------- Botones ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border: none;
    border-radius: 8px;
    padding: .6rem 1.15rem;
    font-size: .92rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background .15s, transform .05s;
}

.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.btn-primary { background: var(--primary); color: #1c1600; }
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); color: #100c00; }

.btn-ghost {
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
}
.btn-ghost:hover:not(:disabled) { background: var(--primary-light); color: var(--accent); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }

.btn-sm { padding: .35rem .7rem; font-size: .82rem; }
.btn-block { width: 100%; }

.row-actions {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* ---------- Adicionales (matriz de precios) ---------- */
.addons-box {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .35rem 0;
    background: #fff;
}

.addon-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    cursor: pointer;
    border-bottom: 1px dashed var(--border);
    transition: background .12s;
}

.addon-item:last-child { border-bottom: none; }
.addon-item:hover { background: #f8fafc; }
.addon-item.checked { background: var(--success-bg); }
.addon-item input[type="checkbox"] { width: auto; flex: 0 0 auto; }
.addon-name { font-weight: 500; white-space: nowrap; }

.addon-dots {
    flex: 1;
    border-bottom: 2px dotted var(--border);
    margin: 0 .35rem .35rem .35rem;
}

.addon-price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 96px;
    text-align: right;
    white-space: nowrap;
}

/* Vista previa del total con desglose */
.price-preview {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .75rem 1rem;
    font-size: .95rem;
}

.price-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .15rem 0;
}

.price-line span:last-child { font-variant-numeric: tabular-nums; }

.price-total {
    border-top: 2px dashed var(--primary);
    margin-top: .35rem;
    padding-top: .5rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary-dark);
}

/* Chips de adicionales en tablas */
.addon-list { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.addon-chip {
    display: inline-block;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    padding: .15rem .55rem;
    white-space: nowrap;
}

/* Adicionales anulados (p. ej. Motocicleta) */
.addons-disabled {
    opacity: .55;
    pointer-events: none;
    filter: grayscale(60%);
}
.addons-empty {
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: .9rem 1rem;
    color: var(--muted);
    font-size: .85rem;
    text-align: center;
}

/* ---------- Alertas / feedback ---------- */
.alert {
    border-radius: 8px;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}
.alert-error { background: var(--danger-bg); color: var(--danger); }
.alert-info { background: #e0f2fe; color: #075985; }
.alert-success { background: var(--success-bg); color: var(--success); }

#form-feedback, #test-feedback, #user-feedback, #washtype-feedback, #settings-feedback {
    margin-bottom: 1rem;
}

/* ---------- Tablas ---------- */
.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.table th, .table td {
    text-align: left;
    padding: .6rem .7rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}

.table tbody tr:hover { background: #f8fafc; }
.table-empty { text-align: center; color: var(--muted); padding: 1.5rem !important; }

/* Tabla "Servicios de hoy": una fila = info + controles, sin scroll horizontal */
.tbl-cards { width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0; }
.tbl-cards th, .tbl-cards td { white-space: normal; }
.tbl-cards td { padding: .7rem .6rem; vertical-align: middle; }
.tbl-cards select {
    width: auto;
    min-width: 7.5rem;
    min-height: 2.4rem;
    padding: .4rem .55rem;
    font-size: .86rem;
}
.tbl-cards tr.today-info-row td { border-bottom: none; }
.tbl-cards tr.today-controls-row { background: #fff; }
.tbl-cards tr.today-controls-row:hover { background: #fff; }
.tbl-cards tr.today-controls-row td {
    border-bottom: 2.5px solid var(--accent);
    padding: .5rem .6rem;
}
.tbl-cards td .row-actions {
    display: flex;
    flex-direction: row;
    gap: .4rem;
}
.tbl-cards td .row-actions .btn {
    flex: 1;
    padding: .48rem .6rem;
    font-size: .83rem;
    white-space: nowrap;
}
.row-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem .9rem;
}
.rc-field {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
}
select.is-locked,
select:disabled {
    cursor: not-allowed;
    background-color: #e7e7e7;
    color: #777;
    opacity: 1;
}

/* Borde por tarjeta de servicio */
.tbl-cards tr.today-info-row td { border-top: 2.5px solid var(--accent); }
.tbl-cards tr.today-info-row td:first-child { border-left: 2.5px solid var(--accent); border-top-left-radius: 10px; }
.tbl-cards tr.today-info-row td:last-child { border-right: 2.5px solid var(--accent); border-top-right-radius: 10px; }
.tbl-cards tr.today-controls-row td {
    border-left: 2.5px solid var(--accent);
    border-right: 2.5px solid var(--accent);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.tbl-cards tr.svc-gap td { border: none !important; background: transparent; height: .7rem; }
.tbl-cards tr.svc-gap { background: transparent; }
.tbl-cards tr.svc-gap:hover { background: transparent; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    padding: .2rem .6rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.badge-pending { background: var(--warning-bg); color: var(--warning); }
.badge-in_progress { background: #dbeafe; color: #1d4ed8; }
.badge-done { background: var(--success-bg); color: var(--success); }
.badge-cancelled { background: var(--danger-bg); color: var(--danger); }

.badge-sent { background: var(--success-bg); color: var(--success); }
.badge-failed { background: var(--danger-bg); color: var(--danger); }
.badge-n-a { background: var(--bg); color: var(--muted); }
.badge-lavador { background: #ffedd5; color: #c2410c; }

/* ---------- Medios de pago ---------- */
.pm {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 999px;
    padding: .18rem .65rem .18rem .18rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

.pm-ico {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    flex: none;
}

.pm-nequi { background: #fce7f3; color: #be185d; }
.pm-nequi .pm-ico { background: #ec4899; }

.pm-breb { background: #dbeafe; color: #1d4ed8; }
.pm-breb .pm-ico { background: #3b82f6; }

.pm-efectivo { background: #dcfce7; color: #16a34a; }
.pm-efectivo .pm-ico { background: #22c55e; }

.pm-bold { background: #fef9c3; color: #854d0e; }
.pm-bold .pm-ico { background: #040607; color: #facc15; }

.pm-n-a { background: var(--bg); color: var(--muted); }
.pm-n-a .pm-ico { background: var(--muted); }

/* Tarjetas de arqueo */
.pm-card { border-top: 4px solid var(--border); }
.pm-card.pm-nequi { border-top-color: #ec4899; }
.pm-card.pm-breb { border-top-color: #3b82f6; }
.pm-card.pm-efectivo { border-top-color: #22c55e; }
.pm-card.pm-bold { border-top-color: #facc15; }

.pm-card .pm { margin-bottom: .5rem; }

.pm-card.pm-total { background: var(--success); color: #fff; border-top-color: var(--primary); }
.pm-card.pm-total .stat-value { color: #fff; }
.pm-card.pm-total .stat-label { color: #cbd5e1; }
.pm-card.pm-total .pm { background: rgba(255, 255, 255, .14); color: #fff; }
.pm-card.pm-total .pm-ico { background: var(--primary); color: #fff; }

/* Pago del trabajador en arqueo */
.pm-card.pm-pay { border-top-color: var(--primary); }
.pm-card.pm-pay .pm { background: var(--ink); color: #fff; }
.pm-card.pm-pay .pm-ico { background: var(--primary); color: #fff; }

.worker-pay-inputs {
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.worker-pay-inputs .form-group { margin: 0; }

.worker-pay-inputs input[type="number"] { width: 6rem; }

/* Casilla "el cliente no tiene teléfono" (y similares): va junto al campo
   y debe seguir siendo una casilla, no un input de ancho completo. */
.check-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .55rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    width: fit-content;
    max-width: 100%;
}

.check-line input[type="checkbox"] {
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0;
    flex: 0 0 auto;
    padding: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

.input-suffix {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.input-suffix span { font-weight: 700; color: var(--muted); }

.worker-amount {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--primary);
    width: 11rem;
    text-align: center;
    background: rgba(37, 99, 235, .06);
}

/* ---------- Pestañas ---------- */
.tabs {
    display: flex;
    gap: .35rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.tab {
    border: none;
    background: transparent;
    padding: .6rem 1.1rem;
    font-family: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
}

.tab:hover { color: var(--ink); }
.tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Stats ---------- */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: var(--card);
    border: 2.5px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.1rem 1.25rem;
}

/* Arqueo: el borde de cada medio de pago conserva su color original */
.pm-card.pm-nequi { border-color: #ec4899; }
.pm-card.pm-breb { border-color: #3b82f6; }
.pm-card.pm-efectivo { border-color: #22c55e; }
.pm-card.pm-bold { border-color: #facc15; }
.pm-card.pm-total { border-color: var(--primary); }
.pm-card.pm-pay { border-color: var(--primary); }
.pm-card.pm-n-a { border-color: var(--border); }

.stat-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--ink);
}

.stat-label {
    font-size: .78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* ---------- Filtros ---------- */
.filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .75rem;
    align-items: end;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: var(--card);
    border: 2.5px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.export-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

/* ---------- Búsqueda por placa ---------- */
.search-row { margin-bottom: .75rem; }

.search-input {
    width: 100%;
    max-width: 420px;
    padding: .55rem .9rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: inherit;
    font-size: .95rem;
    background: var(--card);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(248, 204, 16, .18);
}

/* ---------- Paginación ---------- */
.pagination {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    align-items: center;
    margin-top: 1rem;
    font-size: .85rem;
}

.pagination .btn { min-width: 80px; }

/* ---------- WhatsApp ---------- */
.bot-status {
    display: inline-block;
    padding: .5rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    margin-bottom: 1rem;
}

.bot-status.connected { background: var(--success-bg); color: var(--success); }
.bot-status.unconfigured, .bot-status.qr, .bot-status.auth_failure { background: var(--warning-bg); color: var(--warning); }
.bot-status.connecting { background: #dbeafe; color: #1d4ed8; }
.bot-status.error, .bot-status.disconnected, .bot-status.unreachable { background: var(--danger-bg); color: var(--danger); }

.wa-info { margin: -.25rem 0 .5rem; font-size: .9rem; }

.wa-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.wa-webhook-url {
    display: inline-block;
    background: var(--ink);
    color: #fff;
    padding: .5rem .85rem;
    border-radius: 8px;
    font-size: .85rem;
    word-break: break-all;
    margin-bottom: .5rem;
    user-select: all;
}

.bot-qr { width: 240px; height: 240px; border-radius: 8px; border: 1px solid var(--border); }
.bot-qr-wrap { margin: 1rem 0; }
.bot-qr-wrap img { display: block; margin-bottom: .75rem; }

hr { border: none; border-top: 1px solid var(--border); margin: 1.5rem 0; }

/* ---------- Toast ---------- */
.toast {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    background: var(--ink);
    color: #fff;
    padding: .8rem 1.2rem;
    border-radius: 10px;
    box-shadow: var(--shadow);
    font-size: .9rem;
    z-index: 100;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .2s, transform .2s;
    pointer-events: none;
    max-width: 90vw;
}

.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--danger); }

/* ---------- Responsive ---------- */

/* ------------------------------------------------------------------
   Servicios en tarjetas (dashboard y admin).
   Se activa hasta 1100px porque la tabla de 13 columnas no cabe en
   pantallas medianas: cada campo ocupa su ancho y no hay scroll horizontal.
   ------------------------------------------------------------------ */
@media (max-width: 1100px) {
    .tbl-cards, .tbl-cards thead, .tbl-cards tbody,
    .tbl-cards tr, .tbl-cards td { display: block; width: 100%; }
    .tbl-cards { min-width: 0; max-width: 100%; table-layout: auto; }
    .tbl-cards thead { display: none; }
    .tbl-cards tr {
        border: 2.5px solid var(--accent);
        border-radius: 12px;
        margin-bottom: .8rem;
        padding: .85rem 1rem;
        background: var(--card);
        box-shadow: var(--shadow);
        text-align: center;
    }
    .tbl-cards td { display: block; border: none; padding: .45rem 0; white-space: normal; overflow-wrap: anywhere; }
    .tbl-cards td:empty { display: none; }
    .tbl-cards td .addon-list { justify-content: center; }
    .tbl-cards td select { width: 100%; }

    /* Cada campo muestra su nombre (viene en data-label) sin ocupar más
       que el ancho disponible: etiqueta a la izquierda, valor a la derecha. */
    .tbl-cards td[data-label] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .8rem;
        text-align: right;
        padding: .4rem 0;
        border-bottom: 1px dotted var(--border);
    }
    .tbl-cards td[data-label]:last-of-type { border-bottom: none; }
    .tbl-cards td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        text-align: left;
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--muted);
    }
    .tbl-cards td[data-label] > * { min-width: 0; }

    .tbl-cards tr.today-info-row {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin-bottom: 0;
        padding-bottom: .4rem;
    }
    /* La fila de controles sigue a la de info: comparten la misma tarjeta,
       por eso conserva el borde y solo se le quitan las esquinas de arriba. */
    .tbl-cards tr.today-controls-row {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-bottom: .9rem;
        padding-top: .3rem;
    }
    .tbl-cards tr.svc-gap { display: none; }
    .tbl-cards tr.today-info-row td { border: none; }
    .tbl-cards tr.today-controls-row td { border: none; padding-bottom: .7rem; }
    .tbl-cards .row-controls { flex-direction: column; align-items: stretch; gap: .55rem; width: 100%; }
    .tbl-cards .rc-field { flex-direction: column; align-items: flex-start; gap: .3rem; width: 100%; }
    .tbl-cards td .row-actions { display: flex; width: 100%; gap: .5rem; }
    .tbl-cards td .row-actions .btn { flex: 1; }
    /* En la tabla del catálogo los botones viven en el propio td */
    .tbl-cards td.row-actions { display: flex; width: 100%; gap: .5rem; }
    .tbl-cards td.row-actions .btn { flex: 1; }
    .tbl-cards td:first-child { font-size: .78rem; color: var(--muted); }
    .tbl-cards .table-empty {
        text-align: center;
        border: none;
        box-shadow: none;
        padding: 1rem 0;
    }
}

/* En pantallas anchas la tabla de 13 columnas se reparte el ancho disponible
   en vez de desbordar: el texto largo baja de línea en lugar de provocar
   scroll horizontal. */
@media (min-width: 1101px) {
    #services-tbl { table-layout: fixed; width: 100%; }
    #services-tbl th, #services-tbl td {
        white-space: normal;
        overflow-wrap: anywhere;
        padding: .5rem .4rem;
        font-size: .8rem;
        vertical-align: middle;
    }
    #services-tbl .today-info-row td:nth-child(1),
    #services-tbl .today-info-row td:nth-child(9) { white-space: nowrap; }

    /* Catálogo de servicios: con 6 vehículos son 11 columnas. Se reparte el
       ancho disponible en vez de desbordar (el texto largo baja de línea). */
    #washtypes-tbl { table-layout: fixed; width: 100%; }
    #washtypes-tbl th, #washtypes-tbl td {
        white-space: normal;
        /* break-word y NO anywhere: "anywhere" parte palabras a la mitad
           ("Principa" / "l") cuando la columna queda estrecha. Con
           break-word el texto baja por los espacios y solo se corta una
           palabra si de verdad no cabe sola en una línea. */
        overflow-wrap: break-word;
        padding: .45rem .35rem;
        font-size: .74rem;
        vertical-align: middle;
    }
    #washtypes-tbl th:nth-child(1), #washtypes-tbl td:nth-child(1) { width: 14.5%; }
    #washtypes-tbl th:nth-child(2), #washtypes-tbl td:nth-child(2) { width: 11.5%; }
    #washtypes-tbl th:last-child, #washtypes-tbl td:last-child { width: 9.5rem; }
    /* "Principal" / "Adicional" no se parten nunca. */
    #washtypes-tbl .badge { white-space: nowrap; display: inline-block; }

    /* La columna de acciones queda pegada al borde derecho: "Editar" y
       "Desactivar" siempre se ven sin tener que desplazar la tabla. */
    #washtypes-tbl th:last-child,
    #washtypes-tbl td.row-actions {
        position: sticky;
        right: 0;
        z-index: 2;
        background: var(--card);
        box-shadow: -9px 0 9px -9px rgba(4, 6, 7, .28);
    }
}

@media (max-width: 768px) {
    .filters { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .table:not(.tbl-cards) { min-width: 640px; }
    .table-wrap { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 640px) {
    .topbar { padding: .6rem .75rem; }
    .topbar-inner { flex-wrap: wrap; row-gap: .5rem; }
    .brand { font-size: .95rem; min-width: 0; }
    .brand-logo { height: 28px; width: 28px; }
    .topbar-actions { width: 100%; justify-content: space-between; }
    .user-chip { font-size: .78rem; padding: .25rem .6rem; }
    .chip-link { margin-left: .25rem; padding: .25rem .55rem; }
    .container { margin-top: .75rem; padding: 0 .6rem; }
    .panel { padding: 1rem; }
    .stats-row { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
    .stat-value { font-size: 1.4rem; }
    .filters { grid-template-columns: 1fr; padding: .75rem; }
    .form-grid { grid-template-columns: 1fr; }
    .addon-name { white-space: normal; overflow-wrap: anywhere; }
    form button[type="submit"] { width: 100%; }
    .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab { flex: 0 0 auto; }
    .pagination { justify-content: center; flex-wrap: wrap; }
    .toast { left: .75rem; right: .75rem; max-width: none; text-align: center; }
    .worker-pay-inputs { flex-direction: column; align-items: stretch; }
    .worker-pay-inputs input[type="number"], .worker-amount { width: 100%; }
    .login-card { padding: 1.75rem 1.25rem; }
    .login-logo-img { width: 88px; height: 88px; }
    .bot-qr { width: 100%; max-width: 240px; height: auto; }
    .table:not(.tbl-cards) { min-width: 560px; }
}

@media (max-width: 380px) {
    .stats-row { grid-template-columns: 1fr; }
    .stat-value { font-size: 1.3rem; }
}