/* Milligram overrides -- pasada general de look (2026-07-28).
 *
 * Paleta NEUTRA A PROPÓSITO: todavía no hay nombre ni logo definitivo, así
 * que se usa un azul genérico tipo Stripe/Linear en vez de comprometerse a
 * un color de marca. El día que haya logo, cambiar la marca es tocar estas
 * variables, no rehacer las hojas de estilo.
 */
:root {
    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-primary-light: #eff4ff;

    --color-text: #1f2937;
    --color-text-muted: #6b7280;
    --color-headings: #111827;

    --color-border: #e5e7eb;
    --color-bg: #f5f6f8;
    --color-surface: #fff;
    --color-sidebar-bg: #fff;
    --color-sidebar-active-bg: var(--color-primary-light);

    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;

    --color-message-success-bg: #e3fcec;
    --color-message-success-text: #1f9d55;
    --color-message-success-border: #51d88a;

    --color-message-warning-bg: #fffabc;
    --color-message-warning-text: #8d7b00;
    --color-message-warning-border: #d3b800;

    --color-message-error-bg: #fcebea;
    --color-message-error-text: #cc1f1a;
    --color-message-error-border: #ef5753;

    --color-message-info-bg: #eff8ff;
    --color-message-info-text: #2779bd;
    --color-message-info-border: #6cb2eb;

    --radius: 0.6rem;
    --sidebar-width: 24rem;
}

* {
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    color: var(--color-text);
    background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--color-headings);
    letter-spacing: -0.01em;
}

a {
    color: var(--color-primary);
    transition: color 0.15s ease;
}

a:hover,
a:focus,
a:active {
    color: var(--color-primary-hover);
}

/* Botones -- Form->button() y links con class="button" ya heredan esto
 * sin tener que tocar cada template (ver cake.css viejo: los templates de
 * esta app no usan las clases .content/.actions/.related del scaffolding
 * de bake, son HTML a mano). */
.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    border-radius: 0.4rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.button:hover, button:hover, input[type='button']:hover, input[type='submit']:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}
.button-secondary {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}
.button-secondary:hover {
    background-color: var(--color-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}
.button-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}
.button-danger:hover {
    background-color: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
}

/* Utilidad */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.text-muted {
    color: var(--color-text-muted);
}
.button-small {
    height: auto;
    padding: 0.5rem 1.2rem;
    font-size: 1.2rem;
}

/* Milligram solo estiliza input[type=text/url/week], input:not([type]),
 * textarea y select -- type="number" (cantidad, precio unitario,
 * cotización) quedaba con el tamaño nativo del navegador, más chico y
 * sin bordes redondeados, inconsistente con el resto de los campos.
 * Encontrado al depurar por qué el botón-ojo y el "$" de money-field
 * quedaban descentrados: no era la posición, era que el input al lado
 * tenía otra altura (reportado por Tomás, 2026-07-30). */
input[type='number'] {
    -webkit-appearance: none;
    background-color: transparent;
    border: 0.1rem solid var(--color-border);
    border-radius: 0.4rem;
    box-shadow: none;
    box-sizing: border-box;
    height: 3.8rem;
    padding: 0.6rem 1rem 0.7rem;
    width: 100%;
}
input[type='number']:focus {
    border-color: var(--color-primary);
    outline: 0;
}

/* Input + botón pegados (ej. número de documento + lupa de ARCA) --
 * "Nueva factura", ajuste 2026-07-30. align-items: stretch (default de
 * flex) en vez de flex-end -- así el botón toma exactamente la altura
 * real del input (cualquiera sea) en vez de un alto fijo adivinado que
 * podía no coincidir. */
.input-group {
    display: flex;
    align-items: stretch;
    gap: 0.4rem;
}
.input-group input {
    flex: 1;
    margin-bottom: 0;
}
.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    padding: 0;
    margin-bottom: 0;
    flex-shrink: 0;
}

/* Campo tipo moneda ($ a la izquierda) -- "Nueva factura" (cotización,
 * precio unitario), rediseño 2026-07-30. El "$" seguía descentrado con
 * top:50%/translateY (reportado por Tomás dos veces, 2026-07-30) --
 * translateY centra la CAJA del span, pero el propio line-height del
 * span deja aire arriba/abajo del glyph dentro de esa caja, así que el
 * glyph terminaba visualmente corrido. Ahora el span se estira a todo
 * alto del campo (top/bottom: 0) y usa flex para centrar el glyph
 * dentro de esa altura real -- no depende del line-height del texto. */
.money-field {
    position: relative;
    display: flex;
    align-items: center;
}
.money-field input {
    padding-left: 2.3rem;
    width: 100%;
    /* Milligram le pone margin-bottom:1.5rem a TODO input -- dentro de
     * .input ese margen ya se resetea (.input input), pero en la tabla
     * de ítems el input no está envuelto en .input. Sin este reset, el
     * margen asimétrico (solo abajo) corría el centrado del "$" hacia
     * arriba (reportado por Tomás, 2026-07-30). */
    margin-bottom: 0;
}
.money-field .money-prefix {
    position: absolute;
    left: 0.9rem;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    pointer-events: none;
}

/* Autocomplete (búsqueda de cliente propio / producto por código) --
 * "Nueva factura", rediseño 2026-07-30. */
.autocomplete-wrap {
    position: relative;
}
.autocomplete-resultados {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.3rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px 0 rgba(16, 24, 40, 0.1);
    max-height: 24rem;
    overflow-y: auto;
}
.autocomplete-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.8rem 1.2rem;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    font-weight: 400;
    text-transform: none;
    cursor: pointer;
}
.autocomplete-item:hover, .autocomplete-item:focus {
    background: var(--color-bg);
}
.autocomplete-item small {
    display: block;
    color: var(--color-text-muted);
}

/* Editor de ítems -- columnas angostas para cantidad/alícuota, que no
 * necesitan tanto ancho como descripción. */
.items-table .col-cantidad {
    width: 9rem;
}
.items-table .col-alicuota {
    width: 11rem;
}
.items-table .item-cantidad {
    width: 100%;
}
/* Milligram le pone margin-bottom:1.5rem a TODO input/select -- ya se
 * resetea dentro de .money-field (precio unitario), pero código/
 * descripción/cantidad/alícuota no pasan por ahí, así que su celda
 * quedaba más alta que la de precio unitario y la fila entera centraba
 * cada campo a una altura distinta (reportado por Tomás, 2026-07-30:
 * "el $ está centrado pero el text box que lo contiene no"). Reseteado
 * parejo para toda la fila, así todas las celdas miden lo mismo. */
.items-table input,
.items-table select {
    margin-bottom: 0;
}

/* ===== Layout con sidebar ===== */
.app-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: var(--color-sidebar-bg);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    padding: 2rem 1.6rem;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 2rem;
    text-decoration: none;
}
.sidebar-brand:hover {
    color: inherit;
}
.sidebar-brand-mark {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.7rem;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.sidebar-brand-name {
    font-weight: 700;
    font-size: 1.6rem;
    color: var(--color-headings);
}

.sidebar-switcher {
    margin-bottom: 2rem;
}
.sidebar-switcher select {
    margin-bottom: 0;
    font-size: 1.3rem;
    height: 3.6rem;
    border-radius: 0.5rem;
}

.sidebar-nav {
    flex: 1;
}
.sidebar-nav-section + .sidebar-nav-section {
    margin-top: 2rem;
}
.sidebar-nav-title {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.6rem;
    padding: 0 0.8rem;
}
.sidebar-nav a {
    display: block;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.2rem;
    border-radius: 0.5rem;
    color: var(--color-text);
    font-weight: 500;
    text-decoration: none;
}
.sidebar-nav a:hover {
    background: var(--color-bg);
    color: var(--color-text);
}
.sidebar-nav a.active {
    background: var(--color-sidebar-active-bg);
    color: var(--color-primary);
    font-weight: 600;
}

/* Sub-menú del Contribuyente activo (Resumen/Emitir/Comprobantes/...) */
.sidebar-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.2rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--color-headings);
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.sidebar-nav-toggle:hover {
    background: var(--color-bg);
}
.sidebar-nav-toggle-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-nav-toggle-caret {
    flex-shrink: 0;
    margin-left: 0.6rem;
    transition: transform 0.15s ease;
}
.sidebar-nav-toggle.is-collapsed .sidebar-nav-toggle-caret {
    transform: rotate(-90deg);
}

.sidebar-nav-sub {
    padding-left: 0.8rem;
    border-left: 2px solid var(--color-border);
    margin-left: 0.8rem;
}
.sidebar-nav-sub.is-collapsed {
    display: none;
}

.sidebar-nav-disabled {
    display: block;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.2rem;
    color: var(--color-text-muted);
    cursor: default;
}

.sidebar-footer {
    border-top: 1px solid var(--color-border);
    padding-top: 1.4rem;
    margin-top: 1.4rem;
    font-size: 1.3rem;
}
.sidebar-footer .sidebar-user {
    display: block;
    color: var(--color-text-muted);
    margin-bottom: 0.4rem;
    word-break: break-all;
}

.main-content {
    flex: 1;
    min-width: 0;
}

.topbar {
    display: none;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.6rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.page-container {
    max-width: 112rem;
    padding: 2.4rem;
    margin: 0 auto;
}
/* Opt-in por pantalla (layout: $this->assign('anchoAmplio', '1')) --
 * pantallas con varias filas de columnas (ej. "Nueva factura") dejaban
 * mucho margen muerto a los costados con el ancho default; no se subió
 * ese default globalmente para no estirar de más pantallas simples
 * (login, formularios de un campo). */
.page-container-ancho {
    max-width: 152rem;
}

.page-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2.4rem;
    box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

input.sidebar-toggle-input {
    display: none;
}
.sidebar-toggle-label {
    display: none;
    cursor: pointer;
    font-size: 1.8rem;
    line-height: 1;
    padding: 0.4rem 0.6rem;
    border-radius: 0.4rem;
}
.sidebar-toggle-label:hover {
    background: var(--color-bg);
}

/* Portal de clientes (público, más simple, sin sidebar) */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 112rem;
    padding: 2rem 2.4rem;
    margin: 0 auto;
}
.top-nav-title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.top-nav-title a,
.top-nav-title span {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-headings);
    text-decoration: none;
}
.top-nav-links a,
.top-nav-links span {
    margin-left: 1.4rem;
    font-size: 1.4rem;
}
.top-nav-links a {
    color: var(--color-text-muted);
    font-weight: 600;
}
.top-nav-links span {
    color: var(--color-text-muted);
}

/* Encabezado de página */
h1:first-child {
    margin-top: 0;
}

/* Tablas -- casi todas las pantallas son un <table> a secas, sin clases
 * propias, así que el estilo tiene que salir de acá para alcanzar a todas
 * de una. */
table {
    border-collapse: collapse;
}
thead th {
    text-align: left;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
    padding-bottom: 0.8rem;
}
tbody tr {
    border-bottom: 1px solid var(--color-border);
}
tbody tr:hover {
    background: var(--color-bg);
}
tbody tr:last-child {
    border-bottom: none;
}
td, th {
    padding: 0.9rem 1rem 0.9rem 0;
}
td:last-child a,
th:last-child {
    white-space: nowrap;
}

/* Flash messages */
.message {
    padding: 1rem 1.4rem;
    background: var(--color-message-info-bg);
    color: var(--color-message-info-text);
    border-color: var(--color-message-info-border);
    border-width: 1px;
    border-style: solid;
    border-radius: 0.5rem;
    margin-bottom: 1.6rem;
    cursor: pointer;
}
.message.hidden {
    display: none;
}
.message.success {
    background: var(--color-message-success-bg);
    color: var(--color-message-success-text);
    border-color: var(--color-message-success-border);
}
.message.warning {
    background: var(--color-message-warning-bg);
    color: var(--color-message-warning-text);
    border-color: var(--color-message-warning-border);
}
.message.error {
    background: var(--color-message-error-bg);
    color: var(--color-message-error-text);
    border-color: var(--color-message-error-border);
}

/* Forms */
.input {
    margin-bottom: 1.5rem;
}
.input label {
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--color-text);
}
.input input,
.input select,
.input textarea {
    margin-bottom: 0;
    border-radius: 0.4rem;
    border-color: var(--color-border);
}
.input input:focus,
.input select:focus,
.input textarea:focus {
    border-color: var(--color-primary);
}
.input label:has(input[type='checkbox']),
.input label:has(input[type='radio']) {
    display: flex;
    align-items: center;
}
.input label:has(~ label),
.input label:has(input[type='radio']) {
    margin-bottom: 0;
}
.input label > input[type='checkbox'],
.input label > input[type='radio'] {
    margin-right: 1.0rem;
}
input[type='color'] {
    max-width: 4rem;
    padding: 0.3rem .5rem 0.3rem;
}
.error-message {
    color: var(--color-message-error-text);
    font-size: 1.2rem;
}

/* Paginator */
.paginator {
    text-align: right;
}
.paginator p {
    margin-bottom: 0;
}
.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 1.6rem 0 0 0;
    padding: 0;
}
.pagination li {
    display: inline-block;
    margin: 0.25em;
    text-align: center;
}
.pagination a {
    color: var(--color-primary);
    display: inline-block;
    font-size: 1.25rem;
    line-height: 3rem;
    min-width: 3rem;
    padding: 0;
    position: relative;
    text-decoration: none;
    transition: background .3s,color .3s;
}
.pagination li.active a,
.pagination a:hover {
    text-decoration: underline;
}
.pagination .disabled a {
    cursor: not-allowed;
    color: var(--color-text-muted);
    text-decoration: none;
}
.first a,
.prev a,
.next a,
.last a {
    padding: 0 .75rem;
}
.disabled a:hover {
    background: initial;
    color: initial;
}
.asc:after {
    content: " \2193";
}
.desc:after {
    content: " \2191";
}

/* Error en modo no-debug */
.error-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
}

@media screen and (max-width: 900px) {
    .sidebar-toggle-label {
        display: inline-block;
    }
    .topbar {
        display: flex;
    }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0);
    }
    .sidebar-toggle-input:checked ~ .app-shell .sidebar {
        transform: translateX(0);
        box-shadow: 0 0 0 100vmax rgba(15, 23, 42, 0.35);
    }
    .page-container {
        padding: 1.6rem;
    }
    .page-card {
        padding: 1.6rem;
    }
}

@media screen and (max-width: 640px) {
    /* Milligram no trae un sistema de columnas responsive */
    .row .column[class*='column-'] {
        flex: 0 0 100%;
        max-width: 100%
    }
    .asc:after {
        content: " \2192";
    }
    .desc:after {
        content: " \2190";
    }
}