* { box-sizing: border-box; }
:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; color: #172b3b; background: #f3f6f8; }
body { margin: 0; }
a { color: #126978; text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { padding: 20px 5%; display: flex; gap: 20px; align-items: center; color: white; background: #123747; }
.brand { color: white; font-size: 22px; font-weight: 750; margin-right: auto; }
.brand small { display: block; font-size: 12px; font-weight: 400; letter-spacing: .1em; }
nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 5%; background: white; border-bottom: 1px solid #dae2e8; }
nav a { padding: 8px 16px; border-radius: 8px; }
nav .selected { color: white; background: #126978; }
main { max-width: 1240px; margin: 32px auto; padding: 0 24px; }
h1 { font-size: 30px; letter-spacing: -.04em; } h2 { font-size: 21px; }
.card, .table-wrap { background: white; border: 1px solid #dce5e9; border-radius: 12px; padding: 24px; margin: 20px 0; }
.table-wrap { padding: 0; overflow-x: auto; }
.toolbar, .search { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin: 16px 0; }
button, .button { font: inherit; display: inline-block; border: 0; border-radius: 7px; background: #126978; color: white; padding: 10px 16px; cursor: pointer; }
button:hover, .button:hover { filter: brightness(.92); text-decoration: none; }
.secondary { background: #eaf1f4; color: #244655; }
.inline { display: inline; }.actions { min-width: 210px; }.actions > * { display: inline-block; margin: 3px; }.actions button { padding: 5px 8px; font-size: 12px; }
label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid #b6c8d1; border-radius: 6px; font: inherit; color: #172b3b; background: white; }
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid #8fd3df; outline-offset: 2px; }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
fieldset { border: 1px solid #dce5e9; margin-bottom: 18px; border-radius: 8px; padding: 20px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; vertical-align: top; padding: 16px; border-bottom: 1px solid #e3eaee; overflow-wrap: anywhere; }
th { background: #edf3f6; font-size: 12px; text-transform: uppercase; }
.badge { background: #e6f3ee; color: #25634d; padding: 4px 8px; border-radius: 4px; }
.alert { background: #fff0ef; color: #9c302b; padding: 15px; border-radius: 8px; }
.success { background: #e1f3e9; padding: 15px; border-radius: 8px; }
footer { text-align: center; font-size: 12px; color: #667d89; margin: 40px; }
.login { min-height: 100vh; display: grid; place-items: center; background: #123747; }
.login main { width: min(92%, 460px); padding: 36px; }.login button { margin-bottom: 12px; }.eyebrow { text-transform: uppercase; font-size: 12px; letter-spacing: .1em; color: #126978; }
.invoice { background: white; max-width: 900px; padding: 45px; }.invoice-head { display: flex; justify-content: space-between; gap: 40px; border-bottom: 3px solid #126978; }.invoice-head h1 { font-size: 25px; }.invoice-head p { font-size: 13px; }
.invoice-lines th:nth-child(n+2), .invoice-lines td:nth-child(n+2) { text-align: right; white-space: nowrap; }.invoice-lines td:first-child { width: 55%; }.invoice-lines p { font-size: 13px; margin: 5px 0; }
.totals { margin-left: auto; width: 320px; break-inside: avoid; }.totals p { display: flex; justify-content: space-between; }.grand-total { border-top: 2px solid #123747; padding-top: 12px; font-size: 20px; }.notes { overflow-wrap: anywhere; }.print-tools { padding: 20px; text-align: center; }
@media (max-width: 650px) { .grid { grid-template-columns: 1fr; }.topbar { flex-wrap: wrap; }.invoice { padding: 20px; }.invoice-head { flex-direction: column; gap: 0; }.totals { width: 100%; } }
@media print { @page { size: letter; margin: 15mm; } :root, body { background: white; }.print-tools { display: none; }.invoice { margin: 0; padding: 0; max-width: none; }.invoice-head { flex-direction: row; }.invoice-head, tr { break-inside: avoid; }thead { display: table-header-group; }th { background: white; }a { color: black; }.notes { white-space: normal; } }

/* Agenda mensual: el calendario se desplaza horizontalmente en pantallas peque���as. */
.calendar-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.calendar-summary .card { margin: 8px 0; padding: 18px; }
.calendar-summary strong { display: block; font-size: 30px; }
.calendar-summary span, .muted { font-size: 14px; color: #526b79; }
.calendar-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.calendar-wrap { overflow-x: auto; background: white; border: 1px solid #dce5e9; border-radius: 10px; }
.service-calendar { table-layout: fixed; min-width: 840px; }
.service-calendar td { height: 130px; padding: 8px; border: 1px solid #e3eaee; }
.service-calendar th { padding: 12px 8px; }
.outside-month { background: #f3f6f8; }
.calendar-today { background: transparent; box-shadow: inset 0 0 0 2px #126978; }
.day-number { font-weight: 700; margin-bottom: 8px; }
.calendar-event { display: block; background: #eaf3f6; border-left: 3px solid #126978; border-radius: 4px; padding: 8px; margin-top: 7px; font-size: 12px; overflow-wrap: anywhere; }
.calendar-event strong, .calendar-event span { display: block; }
.event-late { background: #fff0e9; color: #8b3c24; border-left-color: #a74429; }
.overdue-list li { margin: 10px 0; }
@media (max-width: 500px) { .calendar-summary { gap: 8px; }.calendar-summary .card { padding: 12px; }.calendar-summary strong { font-size: 25px; } }

.project-item { padding: 16px 0; border-bottom: 1px solid #dce5e9; overflow-wrap: anywhere; }
.project-item h3 { margin: 4px 0; }
details > form { padding-top: 18px; }
summary { cursor: pointer; padding: 8px 0; }


/* Header and navigation aligned with main content. */
.topbar, .topbar + nav {
    padding-left: max(24px, calc((100% - 1240px) / 2 + 24px));
    padding-right: max(24px, calc((100% - 1240px) / 2 + 24px));
}
.topbar { background: #fff; color: #123747; flex-wrap: wrap; }
.topbar .brand {
    display: block;
    flex: 1 1 300px;
    width: auto;
    max-width: 700px;
    min-width: 0;
    margin-right: auto;
}
.header-logo { display: block; width: 100%; height: auto; }
.topbar > span, .topbar > form { flex-shrink: 0; }
.topbar + nav { justify-content: flex-start; }

/* Color del estado en el calendario */
.service-calendar .service-status {
    display: inline-block;
    padding: 3px 8px;
    margin-top: 4px;
    border-radius: 5px;
    font-weight: 600;
}

.service-status.status-cancelado {
    background: #eeeeee;
    color: #444444;
}

.service-status.status-terminado {
    background: #d9f2df;
    color: #205c30;
}

.service-status.status-en_proceso {
    background: #1565c0;
    color: #ffffff;
}

.service-status.status-programado {
    background: #4b5563;
    color: #ffffff;
}

.service-status.status-pendiente {
    background: #fff3bf;
    color: #665000;
}

.service-status.status-atrasado {
    background: #ffdada;
    color: #8b2020;
}

/* Encabezados ordenables; funcionan sin JavaScript. */
.sortable-list th a { display: flex; align-items: center; gap: 8px; color: #244655; }
.sortable-list th[aria-sort="ascending"], .sortable-list th[aria-sort="descending"] { background: #dceef0; }
.sortable-list th a span { margin-left: auto; }
.sortable-list td { min-width: 100px; }

/* Interfaz compacta: mayor densidad en pantalla sin modificar facturas impresas. */
@media screen {
    :root { font-size: 14px; line-height: 1.4; }
    body { min-width: 0; }

    .topbar {
        gap: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .topbar, .topbar + nav {
        padding-left: max(18px, calc((100% - 1480px) / 2 + 18px));
        padding-right: max(18px, calc((100% - 1480px) / 2 + 18px));
    }
    .topbar .brand { flex-basis: 250px; max-width: 520px; }
    .topbar > span { font-size: 13px; }
    .topbar button { padding: 6px 10px; }

    nav { gap: 3px; padding-top: 6px; padding-bottom: 6px; }
    nav a { padding: 6px 11px; border-radius: 6px; font-size: 13px; }

    main { max-width: 1480px; margin: 18px auto; padding: 0 18px; }
    h1 { margin: 0 0 12px; font-size: 24px; line-height: 1.2; }
    h2 { margin: 0 0 9px; font-size: 18px; line-height: 1.25; }
    h3 { margin: 0 0 7px; font-size: 15px; }
    p { margin: 7px 0; }

    .card, .table-wrap { border-radius: 8px; }
    .card { padding: 14px; margin: 12px 0; }
    .table-wrap { margin: 12px 0; }
    .toolbar, .search { gap: 10px; margin: 10px 0; }

    button, .button {
        border-radius: 5px;
        padding: 7px 11px;
        font-size: 13px;
        line-height: 1.25;
    }
    .actions { min-width: 155px; }
    .actions > * { margin: 2px; }
    .actions button { padding: 4px 7px; font-size: 11.5px; }

    label { margin-bottom: 8px; font-size: 12.5px; }
    input, select, textarea {
        margin-top: 4px;
        padding: 7px 9px;
        border-radius: 5px;
        font-size: 13px;
        line-height: 1.3;
    }
    textarea { min-height: 66px; }
    .grid { gap: 8px 14px; }
    fieldset { margin-bottom: 12px; padding: 13px; }
    legend { font-size: 13px; }

    table { font-size: 13px; line-height: 1.32; }
    th, td { padding: 8px 10px; }
    th { font-size: 10.5px; letter-spacing: .025em; }
    .sortable-list th a { gap: 4px; }
    .sortable-list td { min-width: 80px; }
    .badge { padding: 2px 6px; }
    .alert, .success { padding: 9px 11px; }

    details > form { padding-top: 9px; }
    summary { padding: 4px 0; }
    .project-item { padding: 9px 0; }
    footer { margin: 24px; }

    .calendar-summary { gap: 10px; }
    .calendar-summary .card { margin: 4px 0; padding: 11px 13px; }
    .calendar-summary strong { font-size: 23px; line-height: 1.1; }
    .calendar-summary span, .muted { font-size: 12px; }
    .calendar-nav { gap: 10px; }
    .service-calendar td { height: 102px; padding: 5px; }
    .service-calendar th { padding: 7px 5px; }
    .day-number { margin-bottom: 4px; }
    .calendar-event { padding: 5px 6px; margin-top: 4px; font-size: 11px; line-height: 1.3; }
    .service-calendar .service-status { padding: 2px 5px; margin-top: 2px; }
    .overdue-list li { margin: 5px 0; }

    .login main { width: min(92%, 420px); padding: 24px; }
}

/* En móvil se evita el zoom automático y se conservan áreas táctiles cómodas. */
@media screen and (max-width: 650px) {
    .topbar { gap: 8px; }
    .topbar .brand { flex-basis: 100%; max-width: 420px; }
    main { margin: 12px auto; padding: 0 12px; }
    input, select, textarea { font-size: 16px; }
    button, .button { min-height: 38px; font-size: 14px; }
    .card { padding: 12px; }
}

/* Agenda unificada y asignaciones. */
.agenda-summary { display:grid; grid-template-columns:repeat(auto-fit,minmax(125px,1fr)); gap:8px; }
.agenda-summary .card { margin:0 0 10px; padding:10px 12px; }
.agenda-summary strong { display:block; font-size:21px; line-height:1.1; }
.agenda-summary span { color:#526b79; font-size:11.5px; }
.agenda-filters label { min-width:145px; margin:0; }
.agenda-checkbox { display:inline-block; width:auto; margin-right:6px; }
.agenda-event { border-left-color:#126978; color:#172b3b; }
.agenda-event.event-personal { background:#fff7cf; border-left-color:#c49600; }
.agenda-event.event-reminder { background:#f1e9ff; border-left-color:#8357b7; }
.agenda-event.event-company { background:#e5f5ea; border-left-color:#318452; }
.agenda-event.event-busy { background:#eef0f2; border-left-color:#77818a; color:#4d5961; }
.agenda-event.event-service { background:#e7f3f5; border-left-color:#126978; }
.agenda-event.event-service.service-alert { background:#fdecec; border-left-color:#c85c5c; }
.sortable-list tr.service-cancelled { opacity:.48; }
.agenda-event div { display:block; }
.agenda-editor { max-width:900px; }
.agenda-actions form { display:inline-block; }
.trust-device-option { display:flex; align-items:center; gap:7px; }
.trust-device-option input { width:auto; margin:0; }
@media screen and (max-width:800px) {
    .agenda-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Navegación lateral del Sistema TDF. */
@media screen {
    .app-shell {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 220px minmax(0, 1fr);
        background: #f3f6f8;
    }
    .app-stage {
        min-width: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }
    .app-stage main { width: 100%; flex: 1; }

    .sidebar {
        position: sticky;
        top: 0;
        z-index: 30;
        height: 100vh;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 9px;
        padding: 14px 10px 12px;
        background: #fff;
        border-right: 1px solid #d9e2e7;
        box-shadow: 2px 0 8px rgb(18 55 71 / 4%);
    }
    .sidebar-title {
        display: block;
        padding: 3px 8px 9px;
        color: #123747;
        line-height: 1.15;
    }
    .sidebar-title strong { display: block; font-size: 17px; }
    .sidebar-title span { display: block; margin-top: 3px; color: #617783; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }

    .sidebar-create { position: relative; }
    .sidebar-create > summary {
        list-style: none;
        padding: 8px 11px;
        border-radius: 6px;
        background: #126978;
        color: #fff;
        font-weight: 700;
    }
    .sidebar-create > summary::-webkit-details-marker { display: none; }
    .sidebar-create > div {
        position: relative;
        margin-top: 4px;
        padding: 4px;
        border: 1px solid #d9e2e7;
        border-radius: 6px;
        background: #fff;
    }
    .sidebar-create a { display: block; padding: 6px 8px; border-radius: 4px; }
    .sidebar-create a:hover { background: #edf4f6; text-decoration: none; }

    .sidebar nav.sidebar-nav {
        display: block;
        padding: 0;
        background: transparent;
        border: 0;
    }
    .sidebar-direct,
    .sidebar-group > summary,
    .sidebar-group a,
    .sidebar-account-link {
        display: block;
        border-radius: 5px;
        color: #244655;
        line-height: 1.25;
    }
    .sidebar-direct,
    .sidebar-group > summary,
    .sidebar-account-link { padding: 7px 9px; font-weight: 650; }
    .sidebar-group { margin: 1px 0; }
    .sidebar-group > summary { position: relative; padding-right: 24px; list-style: none; cursor: pointer; }
    .sidebar-group > summary::-webkit-details-marker { display: none; }
    .sidebar-group > summary::after {
        content: "›";
        position: absolute;
        right: 9px;
        top: 6px;
        color: #758994;
        font-size: 16px;
        transition: transform .15s ease;
    }
    .sidebar-group[open] > summary::after { transform: rotate(90deg); }
    .sidebar-group > div { padding: 1px 0 4px 9px; }
    .sidebar-group a { padding: 5px 8px 5px 13px; font-size: 12.5px; }
    .sidebar-direct:hover,
    .sidebar-group > summary:hover,
    .sidebar-group a:hover,
    .sidebar-account-link:hover { background: #edf4f6; text-decoration: none; }
    .sidebar-group > summary.current-group { color: #126978; }
    .sidebar .selected {
        color: #fff;
        background: #126978;
    }
    .sidebar .selected:hover { background: #0f5c69; }

    .sidebar-account {
        margin-top: auto;
        padding: 9px 4px 0;
        border-top: 1px solid #e1e8ec;
    }
    .sidebar-user { display: block; padding: 2px 9px 5px; color: #617783; font-size: 11px; overflow-wrap: anywhere; }
    .sidebar-account form { display: block; margin: 3px 5px 0; }
    .sidebar-account form button { width: 100%; padding: 6px 9px; text-align: left; }

    .app-stage .topbar {
        position: relative;
        min-height: 88px;
        justify-content: center;
        padding: 8px 18px;
        background: #fff;
        border-bottom: 1px solid #d9e2e7;
    }
    .app-stage .topbar .brand {
        flex: 0 1 520px;
        width: min(100%, 520px);
        max-width: 520px;
        margin: 0 auto;
    }
    .app-stage .header-logo { width: 100%; max-height: 74px; object-fit: contain; object-position: center; }
    .menu-toggle { display: none; }
    .sidebar-backdrop { display: none; }
    .app-stage footer { margin: 18px 18px 22px; }
}

/* Conserva visibles los datos anulados, pero los separa claramente de los vigentes. */
tr.receipt-cancelled > td {
    color: #77838a;
    background: #f0f2f3;
    opacity: .72;
}
tr.receipt-cancelled a { color: #66777f; }

/* Formulario compacto de pago y recibo: dos filas de tres columnas. */
.payment-primary-fields,
.payment-secondary-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 12px;
    flex: 1 0 100%;
    width: 100%;
}
.payment-primary-fields label,
.payment-secondary-fields label { min-width: 0; margin-bottom: 0; }
.payment-secondary-fields textarea { min-height: 66px; }
.payment-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 0 100%;
    width: 100%;
}
.payment-warning {
    color: #75838b;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
}

@media screen and (max-width: 800px) {
    .payment-primary-fields,
    .payment-secondary-fields { grid-template-columns: 1fr; }
    .payment-actions { align-items: flex-start; flex-direction: column; }
    .app-shell { display: block; }
    .sidebar {
        position: fixed;
        left: 0;
        width: min(280px, 86vw);
        transform: translateX(-105%);
        transition: transform .18s ease;
    }
    body.sidebar-open { overflow: hidden; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 20;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: 0;
        background: rgb(18 43 59 / 42%);
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease;
    }
    body.sidebar-open .sidebar-backdrop { display: block; opacity: 1; pointer-events: auto; }
    .app-stage .topbar { min-height: 70px; padding: 7px 12px; }
    .app-stage .topbar .brand { max-width: 390px; padding: 0 48px; }
    .app-stage .header-logo { max-height: 58px; }
    .menu-toggle {
        display: inline-block;
        position: absolute;
        left: 10px;
        top: 50%;
        z-index: 2;
        min-height: 36px;
        padding: 6px 8px;
        transform: translateY(-50%);
        font-size: 12px;
    }
}