/*
* ContaContable — estilos base del portal.
* Paleta: azul institucional, dorado y gris plata.
*/
:root {
--color-primary: #1e56a0;
--color-primary-dark: #163f78;
--color-primary-soft: #e5edf9;
--color-accent: #c9971c;
--color-accent-dark: #a87c12;
--color-accent-soft: #fbf3dc;
--color-bg: #f7f9fc;
--color-surface: #ffffff;
--color-border: #dfe6f0;
--color-text: #1a2333;
--color-muted: #64748b;
--color-danger: #dc2626;
--color-danger-soft: #fee2e2;
--color-success: #16a34a;
--color-success-soft: #dcfce7;
--color-warning: #b45309;
--color-warning-soft: #fef3c7;
--shadow-sm: 0 1px 2px rgba(22, 63, 120, 0.06);
--shadow-md: 0 4px 12px rgba(22, 63, 120, 0.1);
--radius: 12px;
--radius-sm: 8px;
--ring: 0 0 0 3px rgba(30, 86, 160, 0.2);
--topbar-h: 52px;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
background: var(--color-bg);
color: var(--color-text);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary-dark); }
h1, h2, h3 { letter-spacing: -0.01em; }
.container {
max-width: 1100px;
margin: 0 auto;
padding: 1.75rem 1.25rem 3rem;
}
/* Barra superior */
.topbar {
position: sticky;
top: 0;
z-index: 10;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 2px solid var(--color-accent);
}
.topbar__inner {
padding: 0.65rem 1.25rem;
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.topbar__brand {
display: flex;
align-items: center;
gap: 0.45rem;
text-decoration: none;
color: #000;
font-weight: 700;
font-size: 1.15rem;
letter-spacing: -0.01em;
white-space: nowrap;
}
.topbar__logo {
width: auto;
height: 1.4em;
flex: none;
}
.topbar__brand small {
font-size: 0.72rem;
font-weight: 500;
color: var(--color-muted);
}
.topbar__nav {
display: flex;
gap: 0.25rem;
flex: 1;
}
.topbar__nav a {
color: var(--color-muted);
text-decoration: none;
font-size: 0.92rem;
font-weight: 500;
padding: 0.35rem 0.7rem;
border-radius: 999px;
transition: color 0.15s ease, background 0.15s ease;
}
.topbar__nav a:hover {
color: var(--color-primary-dark);
background: var(--color-primary-soft);
}
.topbar__user {
margin-left: auto;
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.88rem;
color: var(--color-muted);
}
.topbar__avatar-link {
display: inline-flex;
padding: 0;
border: 0;
border-radius: 50%;
background: none;
cursor: pointer;
transition: box-shadow 0.15s ease;
}
.dropdown--open .topbar__avatar-link { box-shadow: 0 0 0 3px var(--color-primary-soft); }
/* Menú de usuario (avatar): perfil y cerrar sesión */
.user-menu { position: relative; }
.user-menu__panel {
display: none;
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
z-index: 20;
width: max-content;
min-width: 220px;
max-width: min(300px, calc(100vw - 2rem));
padding: 0.35rem;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-md);
}
.dropdown--open .user-menu__panel { display: block; }
.user-menu__header {
display: flex;
flex-direction: column;
gap: 0.1rem;
padding: 0.5rem 0.65rem 0.6rem;
margin-bottom: 0.3rem;
border-bottom: 1px solid var(--color-border);
font-size: 0.82rem;
color: var(--color-muted);
}
.user-menu__header strong { color: var(--color-text); font-size: 0.92rem; }
.user-menu__header span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-menu__form { margin: 0; }
.user-menu__item {
display: block;
width: 100%;
padding: 0.5rem 0.65rem;
border: 0;
border-radius: 6px;
background: none;
color: var(--color-text);
font: inherit;
font-size: 0.9rem;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.user-menu__item:hover,
.user-menu__item:focus-visible {
background: var(--color-primary-soft);
color: var(--color-primary-dark);
outline: none;
}
.user-menu__item--danger:hover,
.user-menu__item--danger:focus-visible {
background: var(--color-danger-soft);
color: var(--color-danger);
}
.topbar__avatar-link:hover,
.topbar__avatar-link:focus-visible {
box-shadow: 0 0 0 3px var(--color-primary-soft);
outline: none;
}
.topbar__avatar.avatar--placeholder { width: 32px; height: 32px; font-size: 0.78rem; }
.topbar__toggle { display: none; }
/* Mensajes flash */
.flash {
padding: 0.7rem 1rem;
border-radius: var(--radius-sm);
margin-bottom: 1.25rem;
border: 1px solid transparent;
font-size: 0.95rem;
}
.flash--notice {
background: var(--color-success-soft);
color: #166534;
border-color: rgba(22, 163, 74, 0.25);
}
.flash--alert {
background: var(--color-danger-soft);
color: #991b1b;
border-color: rgba(220, 38, 38, 0.25);
}
/* Encabezados de página */
.page-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.page-header h1 { margin: 0; font-size: 1.55rem; font-weight: 700; }
.page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.page-header h1 .badge { vertical-align: middle; margin-left: 0.35rem; }
.page-header__with-avatar { display: flex; align-items: center; gap: 0.6rem; }
.page-header__with-avatar .avatar--placeholder, .page-header__with-avatar .logo--placeholder { width: 48px; height: 48px; font-size: 1rem; }
.page-meta {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 0.75rem;
margin: 0.35rem 0 0;
color: var(--color-muted);
font-size: 0.9rem;
}
.page-meta > span:not(:last-child)::after {
content: "·";
margin-left: 0.75rem;
color: var(--color-border);
}
.breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
font-size: 0.85rem;
color: var(--color-muted);
margin-bottom: 0.5rem;
}
.breadcrumbs a {
color: var(--color-muted);
text-decoration: none;
}
.breadcrumbs a:hover { color: var(--color-text); text-decoration: underline; }
.breadcrumbs__current { color: var(--color-text); font-weight: 500; }
/* Tarjetas y secciones */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1.25rem 1.5rem;
margin-bottom: 1.25rem;
box-shadow: var(--shadow-sm);
}
.card h2 {
margin: 0 0 0.85rem;
font-size: 1rem;
font-weight: 600;
color: var(--color-text);
}
.card--empty { color: var(--color-muted); }
.card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.85rem;
}
.card__header h2 { margin: 0; }
/* Panel administrativo: una sola superficie con divisores internos */
.dashboard {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 1px;
background: var(--color-border);
border: 1px solid var(--color-border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.dashboard__full { grid-column: 1 / -1; }
.dashboard > .card {
margin: 0;
min-width: 0;
overflow-x: auto;
border: none;
border-radius: 0;
box-shadow: none;
}
.dashboard .stats {
margin: 0;
gap: 1px;
background: var(--color-border);
}
.dashboard .stat {
border: none;
border-radius: 0;
box-shadow: none;
}
.dashboard a.stat:hover {
transform: none;
box-shadow: none;
background: var(--color-primary-soft);
}
.dashboard__main { padding: 1.5rem; }
.dashboard__main .card__header {
margin-bottom: 1rem;
padding-bottom: 0.85rem;
border-bottom: 2px solid var(--color-accent);
}
.dashboard__main .card__header h2 { font-size: 1.15rem; font-weight: 700; }
.dashboard section[id] { scroll-margin-top: calc(var(--topbar-h) + 1rem); }
.dashboard .card--empty { margin: 0; }
.card__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.6rem;
padding: 0.1rem 0.5rem;
border-radius: 999px;
background: var(--color-primary-soft);
color: var(--color-primary-dark);
font-size: 0.78rem;
font-weight: 700;
}
.cell-badges {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
align-items: center;
}
.cell-badges__link { text-decoration: none; }
.cell-empty { color: var(--color-muted); font-size: 0.85rem; }
@media (max-width: 860px) {
.dashboard { grid-template-columns: 1fr; }
}
/* Indicadores del dashboard */
.stats {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
margin-bottom: 1.5rem;
}
.stat {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
padding: 1rem 1.15rem;
text-decoration: none;
color: inherit;
display: block;
box-shadow: var(--shadow-sm);
transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
a.stat:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
border-color: var(--color-primary);
}
.stat__value {
font-size: 1.9rem;
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-primary-dark);
}
.stat__label {
color: var(--color-muted);
font-size: 0.8rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Tablas */
table {
width: 100%;
border-collapse: collapse;
background: var(--color-surface);
font-size: 0.92rem;
}
th, td {
text-align: left;
padding: 0.65rem 0.75rem;
border-bottom: 1px solid var(--color-border);
vertical-align: top;
}
th {
background: transparent;
font-weight: 600;
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-muted);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f8fafc; }
td.actions, th.actions { text-align: right; white-space: nowrap; }
.money { white-space: nowrap; }
/* Etiquetas de estado */
.badge {
display: inline-block;
white-space: nowrap;
padding: 0.15rem 0.6rem;
border-radius: 999px;
font-size: 0.76rem;
font-weight: 600;
background: #f1f5f9;
color: var(--color-muted);
}
.badge--paid, .badge--active, .badge--completed, .badge--charged, .badge--booked { background: var(--color-success-soft); color: #15803d; }
.badge--pending, .badge--worked, .badge--requested, .badge--in-progress, .badge--uncharged, .badge--unbooked { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--overdue, .badge--inactive, .badge--cancelled { background: var(--color-danger-soft); color: var(--color-danger); }
/* Formularios */
.form { max-width: 620px; }
.form .field { margin-bottom: 1rem; }
.form label {
display: block;
font-weight: 600;
margin-bottom: 0.3rem;
font-size: 0.88rem;
}
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form input[type="date"],
.form input[type="month"],
.form input[type="datetime-local"],
.form input[type="number"],
.form input[type="file"],
.form select,
.form textarea {
width: 100%;
padding: 0.55rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font: inherit;
background: #fff;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: var(--ring);
}
.form textarea { min-height: 100px; }
/* Selectores de fecha nativos: misma altura que los demás campos, números tabulares y un
icono de calendario propio (color primario) en lugar del gris del navegador. */
.form input[type="date"],
.form input[type="month"],
.form input[type="datetime-local"] {
appearance: none;
-webkit-appearance: none;
min-height: 2.6rem;
padding-right: 2.4rem;
font-variant-numeric: tabular-nums;
color-scheme: light;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.7rem center;
background-size: 1.1rem;
cursor: pointer;
}
.form input[type="date"]:hover,
.form input[type="month"]:hover,
.form input[type="datetime-local"]:hover { border-color: var(--color-primary); }
/* El botón nativo queda invisible pero sigue cubriendo el campo, así cualquier clic abre el calendario. */
.form input[type="date"]::-webkit-calendar-picker-indicator,
.form input[type="month"]::-webkit-calendar-picker-indicator,
.form input[type="datetime-local"]::-webkit-calendar-picker-indicator {
position: absolute;
inset: 0;
width: auto;
height: auto;
opacity: 0;
cursor: pointer;
}
.form input[type="date"],
.form input[type="month"],
.form input[type="datetime-local"] { position: relative; }
.form input[type="date"]::-webkit-datetime-edit,
.form input[type="month"]::-webkit-datetime-edit,
.form input[type="datetime-local"]::-webkit-datetime-edit { padding: 0; }
.form input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.form input[type="month"]::-webkit-datetime-edit-fields-wrapper,
.form input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.form input[type="date"]:invalid:not(:focus),
.form input[type="datetime-local"]:invalid:not(:focus) { color: var(--color-muted); }
.password-wrapper { position: relative; }
.password-wrapper input[type="password"],
.password-wrapper input[type="text"] { padding-right: 2.6rem; }
.password-toggle {
position: absolute;
top: 50%;
right: 0.6rem;
transform: translateY(-50%);
display: flex;
align-items: center;
padding: 0.2rem;
border: none;
background: none;
color: var(--color-muted);
cursor: pointer;
}
.password-toggle:hover { color: var(--color-primary); }
.password-toggle svg[hidden] { display: none; }
.form .checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
}
.form .checkbox label { margin: 0; }
.form-errors {
background: var(--color-danger-soft);
color: #991b1b;
border: 1px solid rgba(220, 38, 38, 0.25);
border-radius: var(--radius-sm);
padding: 0.75rem 1rem;
margin-bottom: 1rem;
font-size: 0.92rem;
}
.form-errors ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }
/* Botones */
.btn {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: var(--radius-sm);
border: 1px solid var(--color-primary);
background: var(--color-primary);
color: #fff;
font: inherit;
font-size: 0.9rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
background: var(--color-primary-dark);
border-color: var(--color-primary-dark);
}
.btn:focus-visible {
outline: none;
box-shadow: var(--ring);
}
.btn--secondary {
background: #fff;
border-color: var(--color-border);
color: var(--color-text);
}
.btn--secondary:hover {
background: #f1f5f9;
border-color: var(--color-border);
}
.btn--danger {
background: #fff;
border-color: rgba(220, 38, 38, 0.4);
color: var(--color-danger);
}
.btn--danger:hover {
background: var(--color-danger-soft);
border-color: var(--color-danger);
}
.btn--sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
.btn--link {
background: none;
border: none;
color: var(--color-muted);
text-decoration: underline;
text-underline-offset: 3px;
padding: 0;
cursor: pointer;
}
.btn--link:hover {
background: none;
color: var(--color-danger);
}
/* Filtros */
.filters {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1.25rem;
}
.filters > div { display: flex; min-width: 0; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.filters input, .filters select {
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font: inherit;
font-size: 0.9rem;
line-height: 1.3;
color: var(--color-text);
background-color: var(--color-surface);
box-shadow: var(--shadow-sm);
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.filters input:hover, .filters select:hover {
border-color: #b9c6da;
}
.filters input:focus, .filters select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: var(--ring);
}
.filters input::placeholder { color: var(--color-muted); }
.filters select {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
padding-right: 2.1rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.7rem center;
}
.filters__search { flex: 1 1 240px; }
.filters__search input {
width: 100%;
padding-left: 2.1rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.2' y2='16.2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 0.7rem center;
}
.filters__search input::-webkit-search-cancel-button { cursor: pointer; }
.filters__clear {
font-size: 0.85rem;
color: var(--color-muted);
text-decoration: none;
padding: 0.5rem 0.4rem;
white-space: nowrap;
}
.filters__clear:hover { color: var(--color-danger); text-decoration: underline; text-underline-offset: 3px; }
.sort-link {
color: inherit;
text-decoration: none;
}
.sort-link:hover {
text-decoration: underline;
}
.sort-link--active {
color: var(--color-primary);
}
/* Autenticación */
.auth {
max-width: 380px;
margin: 8vh auto 0;
}
.auth__brand {
margin: 0.5rem 0 1.5rem;
text-align: center;
color: var(--color-primary-dark);
font-size: 1.75rem;
font-weight: 700;
line-height: 1.2;
}
.auth__brand small {
display: block;
font-size: 0.85rem;
font-weight: 500;
color: var(--color-muted);
}
.auth--wide { max-width: 560px; margin-top: 4vh; }
.auth__section {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0.75rem 1rem 0.25rem;
margin: 0 0 1.25rem;
}
.auth__section legend {
padding: 0 0.4rem;
font-weight: 600;
color: var(--color-muted);
font-size: 0.9rem;
}
.auth__register { font-size: 0.92rem; }
/* Vinculaciones */
.engagement-form .field { margin-bottom: 0.75rem; }
.stat--highlight { border-color: var(--color-warning); }
/* Listas de definición (perfil) */
.details {
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.4rem 1.5rem;
margin: 0;
}
.details dt { font-weight: 600; color: var(--color-muted); font-size: 0.9rem; }
.details dd { margin: 0; }
.muted { color: var(--color-muted); }
/* Vista de cliente: menú lateral + pestañas */
.main--full {
max-width: none;
margin: 0;
padding: 0;
}
.main--full .flash {
margin: 1rem 1.25rem;
}
.client-layout {
display: grid;
grid-template-columns: 250px minmax(0, 1fr);
gap: 0;
align-items: start;
min-height: calc(100vh - var(--topbar-h));
}
.side-menu {
position: sticky;
top: var(--topbar-h);
height: calc(100vh - var(--topbar-h));
overflow-y: auto;
background: var(--color-surface);
border-right: 1px solid var(--color-border);
padding: 1.5rem 1.25rem;
}
.side-menu__header h1 {
margin: 0 0 0.35rem;
font-size: 1.1rem;
font-weight: 700;
overflow-wrap: anywhere;
}
.side-menu__header { margin-bottom: 1rem; }
.side-menu__title { color: inherit; text-decoration: none; }
.side-menu__title:hover { color: var(--color-primary-dark); }
.side-menu__nav {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin-bottom: 1rem;
border-top: 1px solid var(--color-border);
padding-top: 0.85rem;
}
.side-menu__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.45rem 0.7rem;
border-radius: var(--radius-sm);
color: var(--color-muted);
font-size: 0.92rem;
font-weight: 500;
text-decoration: none;
transition: color 0.15s ease, background 0.15s ease;
}
.side-menu__link:hover {
color: var(--color-primary-dark);
background: var(--color-primary-soft);
}
.side-menu__link--active {
color: var(--color-primary-dark);
background: var(--color-primary-soft);
font-weight: 600;
}
.side-menu__count {
background: var(--color-accent-soft);
color: var(--color-accent-dark);
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
padding: 0.05rem 0.5rem;
}
/* Periodos a la mano: el mes elegido (con flechas para cambiarlo) y el anterior */
.side-menu__period { margin-bottom: 0.25rem; }
.side-menu__month { position: relative; display: flex; align-items: center; gap: 0.1rem; }
.side-menu__month .side-menu__period-title { flex: 1; min-width: 0; }
/* The previous-month arrow sits in the menu's left gutter so month names stay flush with the other links. */
.side-menu__arrow--prev {
position: absolute;
inset: 0 auto 0 -1.25rem;
width: 1.25rem;
}
.side-menu__period-title {
display: block;
color: var(--color-text);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.side-menu__period-title--open { color: var(--color-primary-dark); }
.side-menu__period-title--missing,
.side-menu__period-title--missing:hover {
color: var(--color-muted);
font-weight: 500;
background: none;
}
.side-menu__tag {
font-size: 0.72rem;
font-weight: 500;
color: var(--color-muted);
}
.side-menu__arrow-form { display: contents; }
.side-menu__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
align-self: stretch;
width: 1.5rem;
padding: 0 0 0.15em;
border: 0;
border-radius: var(--radius-sm);
background: none;
color: var(--color-muted);
font: inherit;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
}
.side-menu__arrow:hover {
color: var(--color-primary-dark);
background: var(--color-primary-soft);
}
.side-menu__sublink {
padding-top: 0.3rem;
padding-bottom: 0.3rem;
padding-left: 1.6rem;
font-size: 0.88rem;
}
.side-menu__reset {
width: 100%;
border: 0;
background: none;
font: inherit;
font-size: 0.85rem;
cursor: pointer;
text-align: left;
}
.side-menu__actions {
display: flex;
flex-direction: column;
gap: 0.4rem;
border-top: 1px solid var(--color-border);
padding-top: 0.85rem;
}
.side-menu__actions .btn { text-align: center; }
.client-content {
min-width: 0;
max-width: 1100px;
padding: 1.75rem 1.5rem 3rem;
}
.client-content > .card:last-child { margin-bottom: 0; }
/* Panel deslizable del cliente en móvil (lo abre el botón de menú de la barra superior) */
.drawer-backdrop { display: none; }
.side-menu__nav--main { display: none; }
.side-menu__label {
padding: 0 0.7rem 0.25rem;
color: var(--color-muted);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
@media (max-width: 760px) {
.client-layout { grid-template-columns: minmax(0, 1fr); }
.side-menu__nav--main {
display: flex;
margin: 1rem 0 0;
}
.drawer-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 30;
background: rgba(26, 35, 51, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease;
}
.drawer-backdrop--visible {
opacity: 1;
pointer-events: auto;
}
.side-menu {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: min(300px, 85vw);
height: auto;
z-index: 40;
transform: translateX(-100%);
transition: transform 0.2s ease;
box-shadow: var(--shadow-md);
}
.side-menu--open { transform: translateX(0); }
}
/* Checklist de documentos requeridos */
.checklist__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: 0.75rem;
}
.checklist__item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
min-height: 8.5rem;
padding: 0.85rem;
border: 2px dashed var(--color-border);
border-radius: var(--radius-sm);
text-align: center;
text-decoration: none;
color: var(--color-muted);
transition: border-color 0.15s ease, background 0.15s ease;
}
.checklist__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
font-size: 1.25rem;
font-weight: 700;
background: #f1f5f9;
}
.checklist__name {
font-weight: 600;
font-size: 0.88rem;
color: var(--color-text);
}
.checklist__meta { font-size: 0.76rem; }
.checklist__item--upload:hover,
.checklist__item--upload:focus-within {
border-color: var(--color-primary);
background: var(--color-primary-soft);
}
.checklist__item--upload:hover .checklist__mark,
.checklist__item--upload:focus-within .checklist__mark {
background: var(--color-primary);
color: #fff;
}
.checklist__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.checklist__item--done {
border-style: solid;
border-color: var(--color-success);
background: var(--color-success-soft);
}
.checklist__preview {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 5.5rem;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--color-surface);
border: 1px solid var(--color-border);
}
.checklist__preview img {
width: 100%;
height: 100%;
object-fit: cover;
}
.checklist__preview:hover { box-shadow: var(--shadow-sm); }
.checklist__ext {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-muted);
}
.checklist__meta a { color: inherit; }
.checklist__thumbs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.4rem;
}
.checklist__thumb {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
}
.checklist__thumb-link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
border-radius: var(--radius-sm);
overflow: hidden;
}
.checklist__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.checklist__thumb:hover { box-shadow: var(--shadow-sm); }
.checklist__thumb-delete {
position: absolute;
top: -0.4rem;
right: -0.4rem;
opacity: 0;
transition: opacity 0.15s ease;
}
.checklist__thumb:hover .checklist__thumb-delete,
.checklist__thumb:focus-within .checklist__thumb-delete { opacity: 1; }
.checklist__item-delete {
top: 0.35rem;
right: 0.35rem;
z-index: 1;
}
.checklist__item:hover .checklist__item-delete,
.checklist__item:focus-within .checklist__item-delete { opacity: 1; }
.checklist__thumb-delete button {
display: flex;
align-items: center;
justify-content: center;
width: 1.15rem;
height: 1.15rem;
padding: 0;
border: none;
border-radius: 50%;
background: var(--color-danger);
color: #fff;
font-size: 0.8rem;
line-height: 1;
cursor: pointer;
box-shadow: var(--shadow-sm);
}
.checklist__thumb .checklist__ext { font-size: 0.6rem; }
.checklist__thumb--add {
position: relative;
border-style: dashed;
border-width: 2px;
background: transparent;
cursor: pointer;
}
.checklist__thumb--add:hover,
.checklist__thumb--add:focus-within {
border-color: var(--color-primary);
background: var(--color-primary-soft);
}
.checklist__mark--sm {
width: 1.4rem;
height: 1.4rem;
font-size: 1rem;
background: transparent;
color: var(--color-muted);
}
@media (min-width: 480px) {
.checklist__item--wide { grid-column: span 2; }
}
@media (max-width: 479px) {
.checklist__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.checklist__item { padding: 0.75rem 0.5rem; }
}
.checklist__item--done .checklist__meta {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.checklist__item--locked { background: var(--color-bg); }
.checklist__pending { position: relative; display: flex; }
.checklist__pending > .checklist__item--upload { flex: 1; }
.checklist__omit {
position: absolute;
top: 0.4rem;
right: 0.4rem;
z-index: 1;
opacity: 0;
transition: opacity 0.15s ease;
}
.checklist__pending:hover .checklist__omit,
.checklist__pending:focus-within .checklist__omit { opacity: 1; }
.checklist__omit-button {
appearance: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-muted);
font: inherit;
font-size: 0.72rem;
padding: 0.15rem 0.5rem;
cursor: pointer;
}
.checklist__omit-button:hover {
color: var(--color-text);
border-color: var(--color-muted);
}
.checklist__add {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.85rem;
}
.checklist__add-select {
flex: 0 1 20rem;
min-width: 0;
padding: 0.4rem 2.1rem 0.4rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font: inherit;
font-size: 0.85rem;
line-height: 1.3;
color: var(--color-text);
background-color: var(--color-surface);
box-shadow: var(--shadow-sm);
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.7rem center;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.checklist__add-select:hover { border-color: #b9c6da; }
.checklist__add-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: var(--ring);
}
.checklist__add-select:invalid { color: var(--color-muted); }
.checklist__hint { margin-top: 0.85rem; font-size: 0.85rem; }
/* Resumen de documentos por cliente en el panel */
.period-nav {
display: flex;
align-items: center;
gap: 0.35rem;
}
.period-nav input[type="month"] {
padding: 0.35rem 0.5rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
color: var(--color-text);
font: inherit;
font-size: 0.85rem;
}
.period-nav input[type="month"]:focus {
outline: none;
border-color: var(--color-primary);
}
.period-nav__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.9rem;
height: 1.9rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
color: var(--color-primary-dark);
text-decoration: none;
font-size: 1.05rem;
line-height: 1;
transition: background 0.15s ease, border-color 0.15s ease;
}
.period-nav__arrow:hover {
background: var(--color-primary-soft);
border-color: var(--color-primary);
}
.doc-summary {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
}
.doc-summary__progress { white-space: nowrap; color: var(--color-warning); font-weight: 600; }
.doc-summary__progress--done { color: #15803d; }
.doc-check {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.12rem 0.55rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
}
.doc-check__mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.85rem;
height: 0.85rem;
border-radius: 50%;
font-size: 0.65rem;
}
.doc-check--done { background: var(--color-success-soft); color: #15803d; }
.doc-check--done:hover { text-decoration: underline; }
.doc-check--done .doc-check__mark { background: #15803d; color: #fff; }
.doc-check--missing { background: #f1f5f9; color: var(--color-muted); }
.doc-check--missing:hover { text-decoration: underline; }
.doc-check--missing .doc-check__mark { border: 1.5px dashed var(--color-muted); }
/* Configuración de documentos requeridos en el formulario de cliente */
.checklist-config {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0.85rem 1rem;
}
.checklist-config legend,
.checklist-config__title {
display: block;
font-weight: 600;
font-size: 0.88rem;
padding: 0 0.35rem;
}
.checklist-config__title { padding: 0; margin-bottom: 0.3rem; }
/* Términos del despacho con el cliente, dentro del formulario de cliente */
.engagement-terms {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0.85rem 1rem 0.25rem;
}
.engagement-terms legend {
font-weight: 600;
font-size: 0.9rem;
padding: 0 0.35rem;
color: var(--color-primary-dark);
}
.checklist-config .muted { margin: 0 0 0.6rem; font-size: 0.85rem; }
.checklist-config__option {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 400;
margin-bottom: 0.25rem;
}
/* Pestañas */
.tabs__nav {
display: flex;
gap: 0.25rem;
border-bottom: 1px solid var(--color-border);
margin-bottom: 1rem;
}
.tabs__tab {
appearance: none;
background: none;
border: none;
border-bottom: 2px solid transparent;
padding: 0.55rem 0.9rem;
margin-bottom: -1px;
font: inherit;
font-size: 0.92rem;
font-weight: 500;
color: var(--color-muted);
cursor: pointer;
}
.tabs__tab:hover { color: var(--color-primary-dark); }
.tabs__tab--active {
color: var(--color-primary-dark);
border-bottom-color: var(--color-primary);
}
a.tabs__tab { text-decoration: none; }
/* Pestañas anidadas (p. ej. Balance / Estado de resultados / Diario dentro de un periodo) */
.tabs__nav--sub {
display: inline-flex;
gap: 0.25rem;
padding: 0.25rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-surface);
}
.tabs__nav--sub .tabs__tab {
padding: 0.35rem 0.9rem;
margin: 0;
border: none;
border-radius: 999px;
font-size: 0.85rem;
}
.tabs__nav--sub .tabs__tab--active {
background: var(--color-primary-soft);
color: var(--color-primary-dark);
font-weight: 600;
}
.tabs__count {
display: inline-block;
margin-left: 0.25rem;
background: var(--color-accent-soft);
color: var(--color-accent-dark);
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
padding: 0.05rem 0.5rem;
vertical-align: middle;
}
/* Solicitudes de factura (pestaña Facturas de un periodo) */
.invoice-requests__amount, .invoice-items__amount { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.invoice-requests__row--cancelled td { color: var(--color-muted); }
.invoice-requests__type {
display: inline-block;
margin-left: 0.3rem;
padding: 0 0.45rem;
border-radius: 999px;
background: var(--color-accent-soft);
color: var(--color-accent-dark);
font-size: 0.72rem;
font-weight: 600;
white-space: nowrap;
}
/* Claves del SAT (RFC, régimen, uso, forma y método de pago) como chips monoespaciados */
.sat-code {
display: inline-block;
min-width: 2.1rem;
padding: 0 0.4rem;
border-radius: 6px;
background: #eef2f7;
color: var(--color-primary-dark);
font: 600 0.74rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
text-align: center;
vertical-align: 0.08em;
}
.sat-code--id { font-size: 0.8rem; letter-spacing: 0.03em; }
.form .form__group {
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 0.85rem 1rem 0.25rem;
margin-bottom: 1.25rem;
}
.form .form__group legend {
font-weight: 600;
font-size: 0.9rem;
padding: 0 0.35rem;
color: var(--color-primary-dark);
}
.form .form__row--thirds { grid-template-columns: repeat(3, 1fr); }
.form .input--upper { text-transform: uppercase; }
.invoice-items__header,
.invoice-items__row {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr) auto;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.5rem;
}
.invoice-items__header {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-muted);
}
.invoice-items__row input[type="number"] { text-align: right; }
.invoice-items__row[hidden] { display: none; }
.form .invoice-items__field { display: block; margin: 0; font-weight: 400; font-size: inherit; min-width: 0; }
.invoice-items__field--subtotal { text-align: right; }
.invoice-items__subtotal { font-size: 0.9rem; color: var(--color-muted); }
@media (min-width: 761px) {
.invoice-items__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
}
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.invoice-items__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: 0.5rem 0 1rem;
color: var(--color-muted);
font-size: 0.9rem;
}
.invoice-items__totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem 1.25rem; }
.invoice-items__total strong { color: var(--color-text); font-variant-numeric: tabular-nums; }
/* Página de la solicitud: contenido a la izquierda, seguimiento y notas fijos a la derecha */
.invoice-request__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
gap: 1.25rem;
align-items: start;
}
.invoice-request__main { min-width: 0; }
.invoice-request__aside {
position: sticky;
top: calc(var(--topbar-h) + 1rem);
display: grid;
gap: 1.25rem;
max-height: calc(100vh - var(--topbar-h) - 2rem);
overflow-y: auto;
}
.invoice-request__aside .card { margin: 0; }
.invoice-request__aside .card h2 { font-size: 1rem; }
.summary__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
flex-wrap: wrap;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
margin-bottom: 1rem;
}
.summary__eyebrow {
display: block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: 0.15rem;
}
.summary__name { font-size: 1.15rem; display: block; margin-bottom: 0.15rem; overflow-wrap: anywhere; }
.summary__receiver { min-width: 0; }
.summary__receiver .muted { font-size: 0.88rem; }
.summary__ids {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.3rem 0.6rem;
margin: 0.3rem 0 0.3rem;
font-size: 0.88rem;
}
.summary__id { color: var(--color-muted); }
.summary__email { font-size: 0.88rem; margin-top: 0.2rem; overflow-wrap: anywhere; }
.summary__total {
text-align: right;
flex-shrink: 0;
padding: 0.6rem 0.9rem;
border-radius: var(--radius-sm);
background: var(--color-primary-soft);
}
.summary__total .summary__eyebrow { color: var(--color-primary-dark); }
.summary__total strong { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--color-primary-dark); }
.summary__total small { font-size: 0.78rem; }
.summary__terms dd .sat-code { margin-right: 0.15rem; }
.summary__uuid code { font-size: 0.78rem; color: var(--color-muted); word-break: break-all; }
.item__qty-unit { display: none; }
.summary__terms {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
gap: 0.75rem 1.5rem;
margin: 0;
}
.summary__terms dt { font-size: 0.78rem; font-weight: 600; color: var(--color-muted); }
.summary__terms dd { margin: 0.1rem 0 0; }
.summary__terms .summary__term--wide { grid-column: 1 / -1; }
.summary__subtitle {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-muted);
margin: 1.25rem 0 0.5rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border);
}
.summary .invoice-request__items { margin: 0; }
/* Seguimiento: lista de estados (hecho / pendiente / cancelado), sin orden implícito */
.timeline__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.timeline__step { position: relative; display: grid; gap: 0.1rem; padding-left: 1.7rem; font-size: 0.9rem; }
.timeline__step span { font-size: 0.82rem; }
.timeline__step::before {
content: "";
position: absolute;
left: 0;
top: 0.15rem;
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
border: 1.5px solid var(--color-border);
background: var(--color-surface);
box-sizing: border-box;
}
.timeline__step--done::before {
background-color: var(--color-primary);
border-color: var(--color-primary);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 0.7rem;
}
.timeline__step--cancelled::before {
background-color: var(--color-danger);
border-color: var(--color-danger);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 0.6rem;
}
.timeline__step--pending { color: var(--color-muted); }
.timeline__step--pending::before { border-style: dashed; }
.timeline__subtitle { font-size: 0.85rem; margin: 1rem 0 0.4rem; color: var(--color-muted); }
.timeline__short { display: none; }
.invoice-request__aside .notes { max-height: 40vh; overflow-y: auto; padding-right: 0.25rem; }
/* Sin columna lateral: una sola columna con el estatus arriba (tira compacta de pasos), luego el
resumen, los archivos, las notas y al final el asiento contable, que es lo más largo. */
@media (max-width: 1100px) {
.invoice-request__layout { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
.invoice-request__main, .invoice-request__aside { display: contents; }
.invoice-request__layout .card { margin: 0; }
.invoice-request__layout .timeline { order: -1; padding: 0.75rem; }
.invoice-request__ledger { order: 1; }
.invoice-request__aside .notes { max-height: none; overflow: visible; padding-right: 0; }
.timeline h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.timeline__steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.5rem; }
.timeline__step {
justify-items: center;
align-content: start;
gap: 0.05rem;
padding: 0.55rem 0.4rem 0.5rem;
border-radius: var(--radius-sm);
background: #f8fafc;
text-align: center;
line-height: 1.3;
font-size: 0.84rem;
}
.timeline__step::before { position: static; width: 1.4rem; height: 1.4rem; margin-bottom: 0.25rem; }
.timeline__step--done { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.timeline__step--done::before { background-size: 0.85rem; }
.timeline__step--cancelled { background: var(--color-danger-soft); color: #991b1b; }
.timeline__step--pending { background: #fff; outline: 1px dashed var(--color-border); outline-offset: -1px; }
.timeline__step span { font-size: 0.76rem; }
.timeline__subtitle { margin: 0.75rem 0 0.35rem; font-size: 0.8rem; }
}
.invoice-request__items tfoot th { text-align: right; }
/* Tipo de comprobante (I / P / E) en el formulario: tarjetas con la explicación de cada uno */
.voucher-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 0.85rem; }
.form .choice-card {
position: relative;
display: grid;
align-content: start;
gap: 0.2rem;
margin: 0;
padding: 0.7rem 0.85rem 0.75rem 2.35rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: #fff;
font-weight: 400;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.choice-card input {
position: absolute;
top: 0.85rem;
left: 0.8rem;
width: 1rem;
height: 1rem;
margin: 0;
accent-color: var(--color-primary);
cursor: pointer;
}
.choice-card__title { font-weight: 600; font-size: 0.92rem; line-height: 1.3; }
.choice-card__hint { font-size: 0.8rem; line-height: 1.4; color: var(--color-muted); }
.form .choice-card:hover { border-color: var(--color-primary); }
.form .choice-card:has(:checked) {
border-color: var(--color-primary);
background: var(--color-primary-soft);
box-shadow: inset 0 0 0 1px var(--color-primary);
}
.form .choice-card:has(:checked) .choice-card__title { color: var(--color-primary-dark); }
.form .choice-card:has(:focus-visible) { box-shadow: var(--ring); }
.related-requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.invoice-request__ledger .journal { margin-top: 0.25rem; }
.form .form__hint.form__hint--lead {
margin: 0 0 1rem;
padding: 0.6rem 0.9rem;
border-left: 3px solid var(--color-primary);
background: var(--color-primary-soft);
color: var(--color-primary-dark);
font-size: 0.88rem;
}
/* Carga directa del CFDI (PDF + XML) desde la solicitud de factura */
.invoice-upload {
display: grid;
gap: 0.6rem;
margin-bottom: 1.1rem;
}
.invoice-upload__types {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
font-size: 0.85rem;
}
.invoice-upload__types-label { color: var(--color-muted); margin-right: 0.25rem; }
/* Opciones tipo píldora para elegir entre pocas alternativas (radio escondido, etiqueta visible) */
.segmented__option {
position: relative;
display: inline-flex;
align-items: center;
padding: 0.3rem 0.8rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-surface);
color: var(--color-muted);
font-size: 0.82rem;
font-weight: 500;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.segmented__option:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.segmented__option input {
position: absolute;
opacity: 0;
inset: 0;
margin: 0;
cursor: pointer;
}
.segmented__option:has(:checked) {
border-color: var(--color-primary);
background: var(--color-primary);
color: #fff;
font-weight: 600;
}
.segmented__option:has(:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.invoice-upload__drop {
position: relative;
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.9rem 1.1rem;
border: 1.5px dashed var(--color-border);
border-radius: var(--radius-sm);
background: linear-gradient(180deg, var(--color-surface), #f8fafc);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.invoice-upload__drop:hover,
.invoice-upload__drop:focus-within { border-color: var(--color-primary); background: var(--color-primary-soft); }
.invoice-upload__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background: var(--color-primary-soft);
color: var(--color-primary-dark);
flex-shrink: 0;
}
.invoice-upload__drop:hover .invoice-upload__icon,
.invoice-upload__drop:focus-within .invoice-upload__icon { background: var(--color-primary); color: #fff; }
.invoice-upload__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.invoice-upload__text small { font-size: 0.8rem; }
.invoice-upload__pick--touch { display: none; }
@media (hover: none) and (pointer: coarse) {
.invoice-upload__pick { display: none; }
.invoice-upload__pick--touch { display: inline; }
}
.invoice-upload__issues { font-weight: 600; color: var(--color-primary-dark); }
/* Archivos ligados a la solicitud (PDF/XML del CFDI): una fila compacta por archivo */
.files { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.file {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0.6rem 0.55rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
}
.file__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border-radius: 8px;
background: #eef2f7;
color: var(--color-muted);
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.04em;
}
.file__icon--pdf { background: #fdecec; color: #b42318; }
.file__icon--xml { background: #e7f6ec; color: #15803d; }
.file__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.05rem; }
.file__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 600;
font-size: 0.92rem;
text-decoration: none;
}
.file__name:hover { text-decoration: underline; }
.file__meta { font-size: 0.8rem; line-height: 1.4; }
.file form { margin: 0; }
.file__remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border: 0;
border-radius: 8px;
background: none;
color: var(--color-muted);
cursor: pointer;
}
.file__remove:hover, .file__remove:focus-visible { background: var(--color-danger-soft); color: var(--color-danger); outline: none; }
.invoice-upload__formats {
margin-left: auto;
flex-shrink: 0;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--color-muted);
border: 1px solid var(--color-border);
border-radius: 999px;
padding: 0.15rem 0.6rem;
background: var(--color-surface);
}
/* Notas de una solicitud de factura: hilo cronológico cliente ↔ despacho, como burbujas de chat
(las propias a la derecha; el punto de color distingue cliente y despacho) */
.notes { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.note {
align-self: flex-start;
max-width: 90%;
min-width: 9rem;
padding: 0.5rem 0.8rem 0.35rem;
background: #f1f5f9;
border-radius: 14px 14px 14px 4px;
}
.note--mine {
align-self: flex-end;
background: var(--color-primary-soft);
border-radius: 14px 14px 4px 14px;
}
.note__meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 0.4rem;
font-size: 0.8rem;
line-height: 1.35;
margin-bottom: 0.2rem;
}
.note__meta strong::before {
content: "";
display: inline-block;
width: 0.5rem;
height: 0.5rem;
margin-right: 0.35rem;
border-radius: 50%;
background: var(--color-primary);
vertical-align: 0.05em;
}
.note--client .note__meta strong::before { background: var(--color-accent); }
.note__author { color: var(--color-muted); }
.note__body { font-size: 0.92rem; overflow-wrap: anywhere; }
.note__body p { margin: 0; }
.note__body p + p { margin-top: 0.4rem; }
.note__time { display: block; margin-top: 0.1rem; text-align: right; font-size: 0.72rem; color: var(--color-muted); }
.form.note-form { display: grid; gap: 0.5rem; max-width: none; }
.note-form textarea { min-height: 3.5rem; resize: vertical; }
.note-form .btn { justify-self: end; }
/* Contabilidad por cliente (libro de doble entrada) */
.ledger__as-of { color: var(--color-muted); font-size: 0.85rem; }
.ledger__columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem 2.5rem;
}
.ledger__column h3 {
margin: 0 0 0.5rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid var(--color-border);
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-muted);
}
.ledger__accounts { list-style: none; margin: 0; padding: 0; }
.ledger__row {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.3rem 0 0.3rem calc(var(--depth, 0) * 1.25rem);
}
.ledger__row a { color: inherit; text-decoration: none; }
.ledger__row a:hover { text-decoration: underline; }
.ledger__row--child { color: var(--color-muted); font-size: 0.9rem; }
.ledger__row--derived { color: var(--color-muted); font-style: italic; }
.ledger__total {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--color-border);
font-weight: 600;
}
.ledger__result {
display: flex;
justify-content: space-between;
gap: 1rem;
margin-top: 1.25rem;
padding: 0.75rem 1rem;
border-radius: var(--radius-sm);
font-weight: 700;
}
.ledger__result--profit { background: var(--color-success-soft); color: #15803d; }
.ledger__result--loss { background: var(--color-danger-soft); color: var(--color-danger); }
.ledger__filters { justify-content: space-between; }
.ledger__range {
display: flex;
align-items: center;
gap: 0.4rem;
color: var(--color-muted);
}
.ledger__hint { color: var(--color-muted); font-size: 0.85rem; margin: 0.75rem 0 0; }
.pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pill {
padding: 0.3rem 0.8rem;
border-radius: 999px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-muted);
font-size: 0.85rem;
text-decoration: none;
}
.pill:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.pill--active {
background: var(--color-primary-soft);
border-color: var(--color-primary);
color: var(--color-primary-dark);
font-weight: 600;
}
.journal__amount { text-align: right; white-space: nowrap; }
.journal__date { white-space: nowrap; color: var(--color-muted); font-size: 0.88rem; }
/* Libro diario: fecha | cuenta (crece) | debe | haber, con columnas de importe de ancho fijo
para que los movimientos de cada asiento queden alineados con el encabezado. */
.journal { --journal-date-w: 6.5rem; --journal-amount-w: 10rem; }
.journal__head,
.journal__entry,
.journal__line {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.journal__head {
padding-bottom: 0.4rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--color-border);
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-muted);
}
.journal__head .journal__date { color: inherit; font-size: inherit; }
.journal__head .journal__amount,
.journal__line .journal__amount { flex: 0 0 var(--journal-amount-w); }
.journal__head .journal__date,
.journal__entry > .journal__date { flex: 0 0 var(--journal-date-w); padding-top: 0.15rem; }
.journal__body { flex: 1 1 auto; min-width: 0; }
.journal__entry {
padding: 0.6rem 0;
border-bottom: 1px solid var(--color-border);
}
.journal__entry:last-child { border-bottom: none; }
.journal__concept {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
margin-bottom: 0.25rem;
}
.journal__concept .badge { margin-left: 0.3rem; vertical-align: middle; }
.journal__actions { display: inline-flex; gap: 0.35rem; margin-left: auto; }
.journal__line { padding: 0.15rem 0; font-size: 0.9rem; }
.journal__line + .journal__line { border-top: 1px solid rgba(0, 0, 0, 0.05); }
.journal__account { flex: 1 1 auto; min-width: 0; padding-left: 1rem; }
.journal__account a { color: inherit; text-decoration: none; }
.journal__account a:hover { text-decoration: underline; }
@media (max-width: 760px) {
.journal { --journal-date-w: 5rem; --journal-amount-w: 6.5rem; }
}
.chart__name { padding-left: calc(0.75rem + var(--depth, 0) * 1.5rem); }
.chart__row--child td { color: var(--color-muted); font-size: 0.9rem; }
.entry-lines__header,
.entry-lines__row {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 1.5fr) minmax(0, 1.5fr) 5.5rem;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.5rem;
}
.entry-lines__actions { display: flex; justify-content: flex-end; gap: 0.3rem; }
.entry-lines__header {
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-muted);
}
.entry-lines__row input[type="number"] { text-align: right; }
.entry-lines__row[hidden] { display: none; }
.entry-lines__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: 0.5rem 0 1.25rem;
color: var(--color-muted);
font-size: 0.85rem;
}
.entry-lines__totals { font-variant-numeric: tabular-nums; }
.entry-lines__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.form .entry-lines__rate { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 500; }
.form .entry-lines__rate select { width: auto; padding-block: 0.3rem; }
.entry-lines__totals--unbalanced { color: var(--color-danger); font-weight: 600; }
.form .form__row {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1rem;
}
.form .form__hint { color: var(--color-muted); font-size: 0.82rem; margin: 0.3rem 0 0; }
.form--wide { max-width: 820px; }
/* Diseño adaptable */
@media (max-width: 760px) {
.container { padding: 1.25rem 1rem 2.5rem; }
.topbar__inner {
padding: 0.5rem 1rem;
gap: 0.5rem 0.75rem;
}
.topbar__nav {
display: none;
order: 3;
flex: 1 0 100%;
flex-direction: column;
gap: 0.15rem;
padding: 0.4rem 0 0.35rem;
border-top: 1px solid var(--color-border);
}
.topbar--open .topbar__nav { display: flex; }
.topbar__nav a {
padding: 0.6rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 1rem;
}
.topbar__toggle {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
flex-shrink: 0;
width: 2.25rem;
height: 2.25rem;
padding: 0.5rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: #fff;
cursor: pointer;
}
.topbar__toggle span {
display: block;
width: 100%;
height: 2px;
border-radius: 2px;
background: var(--color-primary-dark);
transition: transform 0.2s ease, opacity 0.2s ease;
}
.topbar__toggle:focus-visible {
outline: none;
box-shadow: var(--ring);
}
.topbar--open .topbar__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.topbar--open .topbar__toggle span:nth-child(2) { opacity: 0; }
.topbar--open .topbar__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* With the menu closed, the unread badge is hidden: flag it on the button instead. */
.topbar:not(.topbar--open):has(#chat-badge:not([hidden])) .topbar__toggle::after {
content: "";
position: absolute;
top: -4px;
right: -4px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-accent);
border: 2px solid #fff;
}
.topbar__user {
min-width: 0;
gap: 0.5rem;
font-size: 0.82rem;
}
.card {
padding: 1rem 1.1rem;
overflow-x: auto;
}
.card__header { flex-wrap: wrap; gap: 0.5rem 1rem; }
.client-content { padding: 1.25rem 1rem 2.5rem; }
.filters > div { flex: 1 1 150px; min-width: 0; }
.filters__search { flex-basis: 100%; }
.filters input, .filters select { width: 100%; }
.checklist__add-select { flex: 1 1 auto; }
.details { grid-template-columns: 1fr; gap: 0.1rem; }
/* Facturas en el móvil: formularios a una columna, conceptos en bloques, tablas como tarjetas */
.form .form__row, .form .form__row--thirds { grid-template-columns: 1fr; gap: 0; }
.form .form__group { padding: 0.75rem 0.85rem 0.1rem; }
/* Formulario de solicitud: secciones sin recuadro (se gana ancho), conceptos como tarjetas
numeradas con etiquetas visibles y la barra de enviar fija al pie de la pantalla */
.card:has(> .invoice-request-form) { overflow: visible; }
.invoice-request-form .form__group { border: 0; border-radius: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.invoice-request-form .form__group legend {
float: left;
width: 100%;
margin-bottom: 0.85rem;
padding: 0 0 0.4rem;
border-bottom: 1px solid var(--color-border);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.invoice-request-form .form__group legend + * { clear: both; }
.voucher-types { grid-template-columns: 1fr; gap: 0.5rem; margin-bottom: 0; }
.form .choice-card { padding: 0.6rem 0.8rem 0.65rem 2.3rem; }
.choice-card input { top: 0.8rem; }
.invoice-items__header { display: none; }
[data-invoice-items-target="rows"] { counter-reset: concept; }
.invoice-items__row {
position: relative;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "title title" "desc desc" "qty unit" "price subtotal";
gap: 0.6rem;
margin-bottom: 0.75rem;
padding: 0.7rem 0.75rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: #f8fafc;
counter-increment: concept;
}
.invoice-items__row::before {
content: attr(data-title) " " counter(concept);
grid-area: title;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--color-primary-dark);
}
.invoice-items__label { display: block; margin-bottom: 0.2rem; font-size: 0.76rem; font-weight: 600; color: var(--color-muted); }
.invoice-items__field--description { grid-area: desc; }
.invoice-items__field--quantity { grid-area: qty; }
.invoice-items__field--unit { grid-area: unit; }
.invoice-items__field--price { grid-area: price; }
.invoice-items__field--subtotal { grid-area: subtotal; align-self: end; }
.invoice-items__field--subtotal .invoice-items__subtotal { display: block; padding: 0.55rem 0; font-size: 1rem; font-weight: 600; color: var(--color-text); }
.invoice-items__remove { position: absolute; top: 0.4rem; right: 0.45rem; }
.invoice-items__remove .btn { padding: 0.15rem 0.55rem; font-size: 0.95rem; line-height: 1.2; }
.invoice-items__footer { flex-direction: column; align-items: stretch; gap: 0.85rem; margin-top: 0; }
.invoice-items__add { padding: 0.6rem; border-style: dashed; font-size: 0.9rem; color: var(--color-primary-dark); }
.invoice-items__totals { flex-direction: column; }
.invoice-items__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9rem; }
.invoice-items__total strong { font-size: 1.25rem; }
.invoice-request-form .form__actions {
position: sticky;
bottom: 0;
z-index: 5;
flex-wrap: nowrap;
margin: 0 -1.1rem -1rem;
padding: 0.7rem 1.1rem calc(0.7rem + env(safe-area-inset-bottom));
border-top: 1px solid var(--color-border);
border-radius: 0 0 var(--radius) var(--radius);
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.invoice-request-form .form__actions .btn { flex: 1 1 0; padding: 0.7rem 0.75rem; text-align: center; }
.invoice-request-form .form__actions .btn:first-child { flex-grow: 2; }
.invoice-upload__formats { display: none; }
.invoice-upload__types-label { flex-basis: 100%; margin: 0; font-size: 0.8rem; }
.invoice-upload__types .segmented__option { padding: 0.4rem 0.85rem; white-space: nowrap; }
.invoice-upload__drop { padding: 0.9rem; gap: 0.75rem; }
.invoice-upload__icon { width: 2.25rem; height: 2.25rem; }
.file__meta { white-space: normal; }
.page-header--request { gap: 0.75rem; margin-bottom: 1rem; }
.page-header--request .page-actions { width: 100%; }
.page-header--request .page-actions > *, .page-header--request .page-actions form { flex: 1 1 calc(50% - 0.25rem); }
.page-header--request .page-actions .btn { width: 100%; text-align: center; padding: 0.6rem 0.75rem; }
/* Pasos: solo estado y fecha (el detalle de quién y cuántos archivos queda en escritorio) */
.timeline__detail { display: none; }
.timeline__short { display: block; }
.summary__head { flex-direction: column; align-items: stretch; gap: 0.85rem; }
.summary__total {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: 0.75rem;
text-align: left;
}
.summary__total .summary__eyebrow { margin: 0; }
.summary__total strong { grid-column: 2; grid-row: 1 / span 2; font-size: 1.4rem; }
.summary__total small { grid-column: 1; grid-row: 2; }
.summary__terms { grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
.summary__terms dd { font-size: 0.92rem; line-height: 1.45; }
/* Conceptos como bloques: descripción y, debajo, cantidad × precio = importe */
.invoice-request__items thead { display: none; }
.invoice-request__items, .invoice-request__items tbody, .invoice-request__items tfoot { display: block; }
.invoice-request__items .item {
display: grid;
grid-template-columns: auto auto 1fr;
grid-template-areas: "desc desc desc" "qty price subtotal";
gap: 0.15rem 0.4rem;
padding: 0.6rem 0;
border-bottom: 1px solid var(--color-border);
font-size: 0.9rem;
}
.invoice-request__items .item td, .invoice-request__items .item th { display: block; padding: 0; border: 0; text-align: left; }
.invoice-request__items tr.item:hover td { background: none; }
.invoice-request__items .item__desc { grid-area: desc; font-weight: 500; }
.invoice-request__items .item .item__unit { display: none; }
.invoice-request__items .item__qty { grid-area: qty; color: var(--color-muted); }
.invoice-request__items .item__qty::after { content: " ×"; }
.invoice-request__items .item__qty-unit { display: inline; }
.invoice-request__items .item__price { grid-area: price; color: var(--color-muted); }
.invoice-request__items .item td.item__subtotal,
.invoice-request__items .item th.item__subtotal { grid-area: subtotal; text-align: right; font-weight: 600; }
.invoice-request__items .item--total { grid-template-columns: 1fr auto; grid-template-areas: "desc subtotal"; border-bottom: 0; padding-bottom: 0; }
.invoice-request__items .item--total .item__desc { text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.05em; color: var(--color-muted); align-self: center; }
.invoice-request__items .item--total th.item__subtotal { font-size: 1.05rem; color: var(--color-text); }
/* Asiento ligado: la fecha va sobre el concepto para que Debe/Haber quepan a lo ancho */
.invoice-request__ledger .journal__head .journal__date { display: none; }
.invoice-request__ledger .journal__entry { flex-direction: column; gap: 0.15rem; }
.invoice-request__ledger .journal__entry > .journal__date { flex: none; padding: 0; }
.invoice-request__ledger .journal__account { padding-left: 0; }
.note { max-width: 94%; }
/* Lista de solicitudes: cada fila es una tarjeta que se toca completa */
.invoice-requests__new { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.invoice-requests__new .btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0.55rem 0.4rem;
text-align: center;
font-size: 0.85rem;
line-height: 1.25;
}
.invoice-requests__new .btn:first-child { grid-column: 1 / -1; }
.invoice-requests thead { display: none; }
.invoice-requests, .invoice-requests tbody { display: block; }
.invoice-requests__row {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "receiver amount" "receiver status" "summary summary" "date date";
gap: 0.2rem 0.75rem;
padding: 0.85rem 0;
border-bottom: 1px solid var(--color-border);
}
.invoice-requests__row:last-child { border-bottom: 0; }
.invoice-requests__row td { display: block; padding: 0; border: 0; }
.invoice-requests__row:hover td { background: none; }
.invoice-requests__link { font-weight: 600; color: var(--color-text); text-decoration: none; }
.invoice-requests__link::after { content: ""; position: absolute; inset: 0; }
.invoice-requests__receiver { grid-area: receiver; min-width: 0; }
.invoice-requests__receiver .muted { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.4rem; font-size: 0.82rem; }
.invoice-requests__type { margin-left: 0; }
.invoice-requests__summary { grid-area: summary; font-size: 0.88rem; }
.invoice-requests__summary .muted, .invoice-requests__date .muted { display: inline; }
.invoice-requests__summary .muted::before, .invoice-requests__date .muted::before { content: "· "; }
.invoice-requests__row .invoice-requests__amount { grid-area: amount; font-weight: 700; text-align: right; }
.invoice-requests__status { grid-area: status; justify-self: end; }
.invoice-requests__date { grid-area: date; font-size: 0.8rem; color: var(--color-muted); }
.invoice-requests__row .invoice-requests__actions { display: none; }
.entry-lines__header { display: none; }
.entry-lines__row { grid-template-columns: 1fr 1fr auto; padding-bottom: 0.5rem; border-bottom: 1px dashed var(--color-border); }
.entry-lines__row select[name*='[account_id]'] { grid-column: 1 / -1; }
.entry-lines__footer { flex-direction: column; align-items: stretch; text-align: right; }
.tabs__nav { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs__nav::-webkit-scrollbar { display: none; }
.tabs__tab { white-space: nowrap; }
.invoice-request__aside .notes { max-height: none; }
.details dd { margin-bottom: 0.6rem; }
.page-meta {
font-size: 0.7rem;
gap: 0.1rem 0.5rem;
margin-top: 0.15rem;
}
.page-meta > span:not(:last-child)::after { margin-left: 0.5rem; }
.page-header h1 { font-size: 1.15rem; }
.page-header h1 .badge {
font-size: 0.62rem;
padding: 0.08rem 0.45rem;
}
}
@media (max-width: 480px) {
.page-header h1 { font-size: 1.15rem; }
.topbar__brand { font-size: 1rem; }
.stats { gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat { padding: 0.75rem 0.85rem; }
.stat__value { font-size: 1.55rem; }
th, td { padding: 0.55rem 0.6rem; }
}
/* Directorio de despachos */
.directory {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
}
/* Toda la tarjeta lleva a la página del despacho: el enlace del título se extiende con un ::after
sobre la tarjeta y los demás enlaces/botones quedan por encima para seguir siendo clicables. */
.directory__firm {
position: relative;
display: flex;
flex-direction: column;
gap: 0.4rem;
transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.directory__firm:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.directory__firm:has(.directory__link:focus-visible) { box-shadow: var(--ring); }
.directory__link { color: inherit; text-decoration: none; outline: none; }
.directory__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.directory__firm:hover .directory__link { color: var(--color-primary-dark); }
.directory__firm .tags,
.directory__firm .directory__actions { position: relative; z-index: 1; }
.directory__head {
display: flex;
align-items: center;
gap: 0.75rem;
}
.directory__title { flex: 1; min-width: 0; }
.directory__head h2 { margin: 0; font-size: 1.05rem; }
.directory__head .badge { align-self: flex-start; }
.directory__meta { margin: 0; font-size: 0.88rem; color: var(--color-muted); overflow-wrap: anywhere; }
.directory__description { margin: 0.25rem 0 0; font-size: 0.92rem; line-height: 1.5; }
.directory__actions { margin-top: auto; padding-top: 0.5rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
/* Avatares y logotipos: imagen cuadrada o iniciales sobre un color derivado del nombre */
.avatar, .logo {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
object-fit: cover;
background: var(--color-primary-soft);
color: var(--color-primary-dark);
font-weight: 700;
letter-spacing: 0.02em;
overflow: hidden;
}
.avatar { border-radius: 50%; }
.logo { border-radius: var(--radius-sm); }
.avatar--placeholder, .logo--placeholder {
background: hsl(var(--avatar-hue, 215) 45% 90%);
color: hsl(var(--avatar-hue, 215) 50% 30%);
}
img.avatar, img.logo { display: block; }
.avatar--placeholder { width: 64px; height: 64px; font-size: 1.3rem; }
.logo--placeholder { width: 56px; height: 56px; font-size: 1.2rem; }
.profile__logo.logo--placeholder { width: 128px; height: 128px; font-size: 2.6rem; }
.field--image .avatar--placeholder, .field--image .logo--placeholder { width: 72px; height: 72px; font-size: 1.5rem; }
/* Etiquetas de especialidad */
.tags { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag {
display: inline-block;
padding: 0.15rem 0.6rem;
border-radius: 999px;
background: var(--color-primary-soft);
color: var(--color-primary-dark);
font-size: 0.78rem;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
}
a.tag:hover { background: var(--color-primary); color: #fff; }
.tag--custom { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.tag--more { background: transparent; border: 1px dashed var(--color-border); color: var(--color-muted); }
.profile__aside .tags { margin-bottom: 0.9rem; }
.profile__aside .tags:last-child { margin-bottom: 0; }
.specialties { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.3rem 1rem; margin-bottom: 1rem; }
.specialties__group { margin: 0 0 0.4rem; font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.form .specialties__option { display: flex; align-items: center; gap: 0.45rem; font-weight: 400; font-size: 0.92rem; margin: 0; }
.field--image { display: flex; align-items: center; gap: 1rem; }
.field--image > div { flex: 1; }
.cover-preview { display: block; width: 100%; max-width: 600px; border-radius: var(--radius-sm); margin-bottom: 0.5rem; }
/* Página pública del despacho */
.profile { margin-bottom: 1.25rem; }
.profile__cover {
height: 220px;
border-radius: var(--radius);
overflow: hidden;
background: linear-gradient(120deg, hsl(var(--avatar-hue, 215) 55% 35%), hsl(calc(var(--avatar-hue, 215) + 40) 60% 55%));
}
.profile__cover-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile__head {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 0 1.5rem;
margin-top: -48px;
flex-wrap: wrap;
}
.profile__logo { border: 4px solid var(--color-bg); box-shadow: var(--shadow-md); background: #fff; }
.profile__identity { flex: 1; min-width: 260px; padding-top: 56px; }
.profile__identity h1 { margin: 0 0 0.25rem; font-size: 1.7rem; }
.profile__identity h1 .badge { vertical-align: middle; margin-left: 0.35rem; }
.profile__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: 0.9rem; color: var(--color-muted); }
.profile__meta > span:not(:last-child)::after { content: "·"; margin-left: 0.75rem; }
.profile__tagline { margin: 0.6rem 0 0; font-size: 1.02rem; line-height: 1.5; }
.profile__cta { padding-top: 56px; display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.profile__cta .directory__actions { margin: 0; padding: 0; }
.profile__body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 1.25rem; align-items: start; }
.profile__main .card:last-child, .profile__aside .card:last-child { margin-bottom: 0; }
.prose { line-height: 1.65; }
.prose p { margin: 0 0 0.9rem; }
.prose p:last-child { margin-bottom: 0; }
.details--stacked { grid-template-columns: 1fr; gap: 0.15rem; }
.details--stacked dd { margin-bottom: 0.6rem; overflow-wrap: anywhere; }
.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; }
.team__member { display: flex; align-items: center; gap: 0.75rem; }
.team__member strong { display: block; }
.team__member .muted { font-size: 0.88rem; }
@media (max-width: 768px) {
.profile__body { grid-template-columns: 1fr; }
.profile__cover { height: 140px; }
.profile__head { padding: 0 1rem; margin-top: -32px; }
.profile__logo.logo--placeholder, img.profile__logo { width: 96px; height: 96px; font-size: 2rem; }
.profile__identity, .profile__cta { padding-top: 0; }
.profile__cta { align-items: flex-start; }
}
/* Portada pública del directorio */
.topbar__link {
color: var(--color-primary-dark);
text-decoration: none;
font-size: 0.92rem;
font-weight: 500;
}
.topbar__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hero {
max-width: 640px;
margin: 1rem auto 1.75rem;
text-align: center;
}
.hero h1 {
margin: 0 0 0.6rem;
font-size: 2rem;
font-weight: 700;
color: var(--color-primary-dark);
}
.hero p { margin: 0; color: var(--color-muted); font-size: 1.02rem; }
.hero--footer {
max-width: none;
margin: 2rem 0 0;
padding: 1.5rem;
background: var(--color-primary-soft);
border-color: transparent;
}
.hero--footer h2 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.hero--footer p { margin-bottom: 1rem; }
@media (max-width: 640px) {
.hero h1 { font-size: 1.45rem; }
}
/* Mensajes: pantalla completa, lista de hilos a la izquierda y conversación a la derecha */
.topbar__chat { display: inline-flex; align-items: center; gap: 0.35rem; }
.topbar__badge {
background: var(--color-accent);
color: #fff;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
line-height: 1;
padding: 0.2rem 0.45rem;
min-width: 1.2rem;
text-align: center;
}
/* The page is a column (topbar, flashes, chat) that fills the viewport whatever the topbar's height;
only the thread list and the messages scroll. */
.body--chat { height: 100dvh; display: flex; flex-direction: column; }
.body--chat .topbar { flex-shrink: 0; }
.body--chat main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.body--chat .flash { flex-shrink: 0; }
.chat-layout {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: 340px minmax(0, 1fr);
background: var(--color-surface);
}
.chat-sidebar {
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
border-right: 1px solid var(--color-border);
}
.chat-sidebar__header {
padding: 1rem 1rem 0.75rem;
border-bottom: 1px solid var(--color-border);
}
.chat-sidebar__header h1 { margin: 0 0 0.6rem; font-size: 1.25rem; }
.chat-sidebar__search {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: 999px;
background: var(--color-bg);
font: inherit;
font-size: 0.9rem;
}
.chat-sidebar__search:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring); }
.chat-sidebar__none { margin: 0; padding: 1.25rem 1rem; font-size: 0.9rem; }
.threads { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.thread { border-bottom: 1px solid var(--color-border); }
.thread__link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 1rem;
color: inherit;
text-decoration: none;
transition: background 0.15s ease;
}
.thread__link:hover { background: var(--color-bg); }
.thread--active .thread__link { background: var(--color-primary-soft); }
.thread--ended .thread__name { color: var(--color-muted); }
.thread__avatar {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: hsl(var(--avatar-hue, 215) 55% 90%);
color: hsl(var(--avatar-hue, 215) 45% 30%);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.thread__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.thread__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-width: 0; }
.thread__name { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread__time { flex-shrink: 0; color: var(--color-muted); font-size: 0.75rem; }
.thread__preview {
flex: 1;
min-width: 0;
color: var(--color-muted);
font-size: 0.85rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.thread--unread .thread__name, .thread--unread .thread__preview { color: var(--color-text); font-weight: 700; }
.thread--unread .thread__time { color: var(--color-accent-dark); font-weight: 600; }
.thread__from { color: var(--color-text); }
.thread__empty { font-style: italic; }
.thread__count {
flex-shrink: 0;
background: var(--color-accent);
color: #fff;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
line-height: 1;
padding: 0.25rem 0.5rem;
min-width: 1.3rem;
text-align: center;
}
.chat-pane {
display: flex;
flex-direction: column;
min-height: 0;
background: var(--color-bg);
}
.chat-pane--empty { align-items: center; justify-content: center; }
.chat-pane__placeholder { text-align: center; color: var(--color-muted); }
.chat-pane__placeholder p { margin: 0.5rem 0 0; }
.chat-pane__icon { color: var(--color-border); }
.chat-pane__header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.65rem 1.25rem;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.chat-pane__back {
display: none;
font-size: 1.6rem;
line-height: 1;
text-decoration: none;
padding: 0 0.4rem;
color: var(--color-primary-dark);
}
.chat-pane__title { flex: 1; min-width: 0; }
.chat-pane__title h1 { margin: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pane__subtitle { margin: 0; color: var(--color-muted); font-size: 0.82rem; }
.chat__messages {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.6rem;
overflow-y: auto;
padding: 1.25rem 1.5rem;
scroll-behavior: smooth;
}
.chat__messages:empty { display: none; }
.chat__empty { margin: 0; padding: 2rem 1.5rem; text-align: center; max-width: 36rem; align-self: center; }
.chat__empty:not([hidden]) { flex: 1; display: flex; align-items: center; }
.message {
align-self: flex-start;
max-width: min(72%, 640px);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius);
border-top-left-radius: 4px;
padding: 0.5rem 0.8rem;
box-shadow: var(--shadow-sm);
}
.message--mine {
align-self: flex-end;
background: var(--color-primary-soft);
border-color: transparent;
border-top-left-radius: var(--radius);
border-top-right-radius: 4px;
}
.message__header {
display: flex;
align-items: baseline;
gap: 0.35rem;
flex-wrap: wrap;
font-size: 0.8rem;
margin-bottom: 0.15rem;
}
.message__party { font-weight: 700; color: var(--color-primary-dark); }
.message__author { color: var(--color-muted); }
.message__time { margin-left: auto; color: var(--color-muted); font-size: 0.72rem; }
.message__body p { margin: 0 0 0.35rem; overflow-wrap: anywhere; }
.message__body p:last-child { margin-bottom: 0; }
.chat-pane__footer {
padding: 0.75rem 1.25rem;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.chat__writing-as { margin: 0 0 0.4rem; font-size: 0.8rem; color: var(--color-muted); }
.chat__compose { display: flex; gap: 0.6rem; align-items: flex-end; }
.chat__compose textarea {
flex: 1;
min-height: 2.6rem;
max-height: 10rem;
resize: vertical;
padding: 0.55rem 0.85rem;
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-bg);
font: inherit;
}
.chat__compose textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--ring); background: #fff; }
.chat__notice { margin: 0; color: var(--color-muted); font-size: 0.9rem; text-align: center; }
@media (max-width: 760px) {
.chat-layout { grid-template-columns: minmax(0, 1fr); }
.chat-layout .chat-pane--empty { display: none; }
.chat-layout--thread .chat-sidebar { display: none; }
.chat-pane__back { display: inline-block; }
.chat-pane__header { padding: 0.5rem 0.75rem; }
.chat-pane__header .badge { display: none; }
.chat__messages { padding: 1rem 0.75rem; }
.chat-pane__footer { padding: 0.6rem 0.75rem; }
.message { max-width: 90%; }
}
/* Pestaña «Gastos» de un periodo: facturas recibidas y gastos sin CFDI, con su estatus fiscal */
.badge--deductible { background: var(--color-success-soft); color: #15803d; }
.badge--missing { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--review { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.badge--non-deductible { background: #eef2f7; color: var(--color-muted); }
.badge--incomplete { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.expenses__subtitle { margin: 0.1rem 0 0; font-size: 0.86rem; }
.expenses-reminder--info { background: var(--color-accent-soft); color: #6b4f0b; }
.expense--incomplete .expense__payee { color: var(--color-accent-dark); }
.expense-checks { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.9rem; }
.expense-checks__item--no .sat-code { background: var(--color-danger-soft); color: var(--color-danger); }
.expense-checks__item--yes .sat-code { background: var(--color-success-soft); color: #15803d; }
.expense-review .form { max-width: none; }
.expense-review__hint { margin: 0 0 0.75rem; }
.expense-review__choices { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Two choices of the same size. Not selected: white with a gray outline, the icon hinting the color.
Selected: soft tint of its color (green / gray), with a colored border and text. */
.expense-review__choices .btn.expense-review__choice {
flex: 1 1 0;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3rem;
min-height: 3rem;
padding: 0.45rem 0.5rem;
border: 2px solid var(--color-border);
background: #fff;
color: var(--color-text);
font-weight: 600;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.expense-review__choice--true svg { color: #15803d; }
.expense-review__choice--false svg { color: #64748b; }
.expense-review__choices .expense-review__choice--true:hover { border-color: var(--color-success); background: var(--color-success-soft); }
.expense-review__choices .expense-review__choice--false:hover { border-color: #94a3b8; background: #f1f5f9; }
.expense-review__choices .expense-review__choice--true.expense-review__choice--selected,
.expense-review__choices .expense-review__choice--true.expense-review__choice--selected:hover {
background: var(--color-success-soft);
border-color: var(--color-success);
color: #166534;
}
.expense-review__choices .expense-review__choice--false.expense-review__choice--selected,
.expense-review__choices .expense-review__choice--false.expense-review__choice--selected:hover {
background: #eef2f7;
border-color: #64748b;
color: #334155;
}
.expense-review__choices .expense-review__choice--selected svg { color: currentColor; }
.expense-review__label { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.expense-review__reset { display: grid; gap: 0.15rem; justify-items: start; margin-top: 0.75rem; }
.expense-review__reset .btn-link {
padding: 0;
border: 0;
background: none;
color: var(--color-danger);
font: inherit;
font-size: 0.85rem;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
.expense-feedback__meta { margin: 0.35rem 0 0; font-size: 0.8rem; }
.expenses-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 1rem;
}
.expenses-summary > div {
padding: 0.75rem 0.9rem;
border-radius: var(--radius-sm);
background: var(--color-bg);
border: 1px solid var(--color-border);
}
.expenses-summary strong { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.expenses-summary__label { font-size: 0.78rem; color: var(--color-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.expenses-summary .expenses-summary__item--ok { background: var(--color-success-soft); border-color: transparent; }
.expenses-summary__item--ok strong { color: #15803d; }
.expenses-summary .expenses-summary__item--missing { background: var(--color-warning-soft); border-color: transparent; }
.expenses-summary__item--missing strong { color: var(--color-warning); }
.expenses-reminder {
display: flex;
gap: 0.5rem;
align-items: flex-start;
margin: 0 0 1rem;
padding: 0.65rem 0.85rem;
border-radius: var(--radius-sm);
background: var(--color-warning-soft);
color: #78350f;
font-size: 0.9rem;
}
.expenses-reminder svg { flex-shrink: 0; margin-top: 0.15rem; color: var(--color-warning); }
.expenses-manual { margin: -0.4rem 0 1.1rem; font-size: 0.88rem; color: var(--color-muted); }
.expenses-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.expenses-list { list-style: none; margin: 0; padding: 0; }
.expense {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto minmax(11rem, 14rem) 6.5rem;
gap: 0.85rem;
align-items: center;
padding: 0.8rem 0.25rem;
border-bottom: 1px solid var(--color-border);
}
.expense:last-child { border-bottom: 0; }
.expense[hidden] { display: none; }
.file__icon--img { background: #fff4e5; color: #b45309; }
.file__icon--foreign { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.expense__body { display: grid; min-width: 0; }
.expense__payee { font-weight: 600; color: var(--color-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.expense__payee:hover { color: var(--color-primary-dark); text-decoration: underline; }
.expense__concept { font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.expense__amount { text-align: right; font-variant-numeric: tabular-nums; display: grid; }
.expense__amount small { font-size: 0.75rem; }
.expense__status { display: grid; justify-items: start; gap: 0.15rem; }
.expense__note { font-size: 0.8rem; line-height: 1.3; }
.expense__account { font-size: 0.75rem; color: var(--color-primary-dark); }
.expense__action { text-align: right; }
.expense__action form { margin: 0; }
.expense__upload { position: relative; cursor: pointer; }
.expense--non-deductible .expense__amount strong { color: var(--color-muted); }
/* Tarjeta guiada para un gasto sin factura */
.form.expense-wizard { max-width: none; }
.expense-wizard .card { margin-top: 0; }
.expense-wizard__step legend { display: flex; align-items: center; gap: 0.5rem; }
.expense-wizard__number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: var(--color-primary);
color: #fff;
font-size: 0.78rem;
font-weight: 700;
}
.expense-wizard__files {
display: flex;
align-items: center;
gap: 0.65rem;
margin: 0 0 1rem;
padding: 0.55rem 0.7rem;
border-radius: var(--radius-sm);
background: var(--color-bg);
font-size: 0.88rem;
}
.evidence-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 0.85rem; }
.expense-wizard__xml { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin-bottom: 0.85rem; }
.expense-wizard__xml .field { flex: 1 1 16rem; margin: 0; }
.expense-wizard__amount { display: flex; gap: 0.5rem; }
.expense-wizard__amount input { flex: 1 1 auto; min-width: 0; }
.form .expense-wizard__amount select { flex: 0 0 9.5rem; width: auto; }
.expense-wizard__amount select[hidden] { display: none; }
.field__label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.88rem; }
.payment-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.form .segmented__option { display: inline-flex; margin: 0; font-weight: 500; }
.form .payment-option { gap: 0.45rem; padding: 0.55rem 1rem; font-size: 0.92rem; }
.foreign-check { display: grid; grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem); gap: 1rem; align-items: start; }
.foreign-check__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.foreign-check__item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.4rem 0.75rem;
padding: 0.5rem 0.6rem;
border-radius: var(--radius-sm);
transition: background 0.15s;
}
.foreign-check__item:hover, .foreign-check__item:focus-within { background: var(--color-primary-soft); }
.foreign-check__label { font-weight: 500; font-size: 0.92rem; }
.foreign-check__hint { margin-left: 0.25rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--color-warning-soft); color: var(--color-warning); font-size: 0.7rem; font-weight: 600; }
.foreign-check__answers { display: inline-flex; gap: 0.3rem; }
.ticket-sample {
padding: 0.85rem 0.9rem;
border: 1px solid var(--color-border);
border-radius: 4px;
background: repeating-linear-gradient(#fff, #fff 22px, #f8fafc 22px, #f8fafc 23px);
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
font-size: 0.72rem;
line-height: 1.5;
color: #334155;
box-shadow: var(--shadow-sm);
}
.ticket-sample__line { padding: 0.3rem 0.4rem; border-radius: 4px; transition: background 0.15s, box-shadow 0.15s; }
.ticket-sample__line + .ticket-sample__line { margin-top: 0.35rem; border-top: 1px dashed var(--color-border); }
.ticket-sample__line--rfc { background: var(--color-warning-soft); }
.ticket-sample__line--on { background: var(--color-primary-soft); box-shadow: inset 0 0 0 2px var(--color-primary); }
.expense-wizard__tip { margin: 0.85rem 0 0; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm); background: var(--color-bg); font-size: 0.86rem; }
.expense-feedback { border-top: 4px solid var(--color-border); transition: border-color 0.2s; }
.expense-feedback h2 { margin-top: 0; }
.expense-feedback--deductible { border-top-color: var(--color-success); }
.expense-feedback--missing { border-top-color: var(--color-warning); }
.expense-feedback--review { border-top-color: var(--color-primary); }
.expense-feedback--non-deductible { border-top-color: #94a3b8; }
.expense-feedback__title { margin: 0.5rem 0 0.2rem; font-weight: 700; font-size: 1.02rem; }
.expense-feedback__text { margin: 0; font-size: 0.88rem; }
.expense-feedback__tip { margin: 0.65rem 0 0; padding: 0.55rem 0.7rem; border-radius: var(--radius-sm); background: var(--color-accent-soft); font-size: 0.86rem; }
.expense-feedback__why { margin-top: 0.65rem; font-size: 0.82rem; color: var(--color-muted); }
.expense-feedback__why summary { cursor: pointer; color: var(--color-primary-dark); font-weight: 600; }
.expense-feedback__why p { margin: 0.35rem 0 0; }
@media (max-width: 1100px) {
.expense-wizard .expense-feedback { position: sticky; bottom: 0.5rem; order: 2; box-shadow: var(--shadow-md); }
}
@media (max-width: 760px) {
.expenses-summary { grid-template-columns: 1fr 1fr; }
.expenses-summary > div:first-child { grid-column: 1 / -1; }
.expense { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icon body amount" "icon status action"; gap: 0.35rem 0.7rem; }
.expense > .file__icon { grid-area: icon; align-self: start; }
.expense__body { grid-area: body; }
.expense__amount { grid-area: amount; }
.expense__status { grid-area: status; }
.expense__action { grid-area: action; align-self: end; }
.evidence-types { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.foreign-check { grid-template-columns: 1fr; }
.ticket-sample { order: -1; }
.payment-option { flex: 1 1 40%; justify-content: center; }
.expense-feedback .expense-feedback__text, .expense-feedback .expense-feedback__why { display: none; }
.expense-feedback h2 { display: none; }
}
.expense-wizard [hidden] { display: none !important; }
.expense-wizard .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.form .expense-wizard__amount input { width: auto; flex: 1 1 6rem; }
.form .expense-wizard__amount select { flex: 0 0 9rem; width: 9rem; }
.foreign-check__item { flex-direction: column; align-items: flex-start; }
@media (min-width: 761px) {
.expense-wizard .form__row { grid-template-columns: 1fr 1fr; }
}