.auth-page {
min-height: 100vh;
background-color: var(--bg-page);
display: flex;
align-items: stretch;
}
.auth-shell {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
.auth-brand-panel {
background-color: var(--primary-900);
color: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-12) var(--space-10);
position: relative;
overflow: hidden;
}
.auth-brand-panel__inner {
max-width: 440px;
width: 100%;
position: relative;
z-index: 1;
}
.auth-brand-panel__logo {
width: 64px;
height: 64px;
object-fit: contain;
margin-bottom: var(--space-6);
}
.auth-brand-panel__heading {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
color: var(--neutral-0);
margin: 0 0 var(--space-3);
}
.auth-brand-panel__highlight {
color: var(--accent-400);
font-weight: var(--font-bold);
display: inline-block;
}
.auth-brand-panel__lead {
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.85);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-8);
}
.auth-brand-panel__bullets {
display: flex;
flex-direction: column;
gap: var(--space-5);
margin-bottom: var(--space-10);
}
.auth-bullet {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.auth-bullet__icon {
width: 38px;
height: 38px;
border-radius: var(--radius-md);
background-color: rgba(0, 194, 204, 0.18);
color: var(--accent-300);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.auth-bullet__title {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--neutral-0);
margin-bottom: 2px;
}
.auth-bullet__desc {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
line-height: var(--leading-normal);
}
.auth-brand-panel__footer {
display: flex;
align-items: center;
gap: var(--space-2);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.15);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
line-height: var(--leading-normal);
}
.auth-brand-panel__footer i {
color: var(--accent-400);
font-size: 16px;
flex-shrink: 0;
}
.auth-content-panel {
background-color: var(--bg-card);
display: flex;
flex-direction: column;
padding: var(--space-5) var(--space-6);
position: relative;
}
.auth-content-panel__topbar {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: var(--space-4);
}
.auth-content-panel__inner {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
width: 100%;
max-width: 460px;
margin: 0 auto;
padding-bottom: var(--space-10);
}
.auth-content-panel__brand {
display: none;
justify-content: center;
margin-bottom: var(--space-5);
}
.auth-content-panel__logo {
width: 56px;
height: 56px;
object-fit: contain;
}
.auth-content-panel__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
margin: 0 0 var(--space-2);
text-align: center;
line-height: var(--leading-tight);
}
.auth-content-panel__subtitle {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0 0 var(--space-6);
text-align: center;
line-height: var(--leading-normal);
}
.auth-content-panel__foot {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-5);
font-size: var(--text-xs);
color: var(--text-muted);
}
.auth-content-panel__foot i {
color: var(--text-accent);
}
@media (max-width: 900px) {
.auth-shell {
grid-template-columns: 1fr;
}
.auth-brand-panel {
display: none;
}
.auth-content-panel__brand {
display: flex;
}
.auth-content-panel {
padding: var(--space-4);
}
.auth-content-panel__title {
font-size: var(--text-xl);
}
}
.auth-form {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.auth-hint {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
font-weight: var(--font-medium);
}
.auth-hint--ok {
color: var(--success-600);
}
.auth-hint--warn {
color: var(--text-muted);
}
.auth-hint .bi {
font-size: 13px;
}
.auth-password-wrap .ds-input {
padding-right: 44px; /* espacio para el botón de ojo */
}
.auth-password-toggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: transparent;
border: none;
color: var(--text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.auth-password-toggle:hover {
background-color: var(--bg-hover);
color: var(--text-primary);
}
.auth-password-toggle:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 1px;
}
.auth-submit {
margin-top: var(--space-3);
}
.ds-checklist {
list-style: none;
padding: 0;
margin: var(--space-2) 0 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.ds-checklist__item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-muted);
transition: color var(--transition-fast);
}
.ds-checklist__item .bi {
font-size: var(--icon-sm);
}
.ds-checklist__item.is-ok {
color: var(--text-success);
}
.auth-page {
min-height: 100vh;
background-color: var(--bg-page);
display: flex;
align-items: stretch;
}
.auth-shell {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
.auth-brand-panel {
background-color: var(--primary-900);
color: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-12) var(--space-10);
position: relative;
overflow: hidden;
}
.auth-brand-panel__inner {
max-width: 440px;
width: 100%;
position: relative;
z-index: 1;
}
.auth-brand-panel__logo {
width: 64px;
height: 64px;
object-fit: contain;
margin-bottom: var(--space-6);
}
.auth-brand-panel__heading {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
color: var(--neutral-0);
margin: 0 0 var(--space-3);
}
.auth-brand-panel__highlight {
color: var(--accent-400);
font-weight: var(--font-bold);
display: inline-block;
}
.auth-brand-panel__lead {
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.85);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-8);
}
.auth-brand-panel__bullets {
display: flex;
flex-direction: column;
gap: var(--space-5);
margin-bottom: var(--space-10);
}
.auth-bullet {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.auth-bullet__icon {
width: 38px;
height: 38px;
border-radius: var(--radius-md);
background-color: rgba(0, 194, 204, 0.18);
color: var(--accent-300);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.auth-bullet__title {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--neutral-0);
margin-bottom: 2px;
}
.auth-bullet__desc {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
line-height: var(--leading-normal);
}
.auth-brand-panel__footer {
display: flex;
align-items: center;
gap: var(--space-2);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.15);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
line-height: var(--leading-normal);
}
.auth-brand-panel__footer i {
color: var(--accent-400);
font-size: 16px;
flex-shrink: 0;
}
.auth-content-panel {
background-color: var(--bg-card);
display: flex;
flex-direction: column;
padding: var(--space-5) var(--space-6);
position: relative;
}
.auth-content-panel__topbar {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: var(--space-4);
}
.auth-content-panel__inner {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
width: 100%;
max-width: 460px;
margin: 0 auto;
padding-bottom: var(--space-10);
}
.auth-content-panel__brand {
display: none;
justify-content: center;
margin-bottom: var(--space-5);
}
.auth-content-panel__logo {
width: 56px;
height: 56px;
object-fit: contain;
}
.auth-content-panel__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
margin: 0 0 var(--space-2);
text-align: center;
line-height: var(--leading-tight);
}
.auth-content-panel__subtitle {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0 0 var(--space-6);
text-align: center;
line-height: var(--leading-normal);
}
.auth-content-panel__foot {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-5);
font-size: var(--text-xs);
color: var(--text-muted);
}
.auth-content-panel__foot i {
color: var(--text-accent);
}
@media (max-width: 900px) {
.auth-shell {
grid-template-columns: 1fr;
}
.auth-brand-panel {
display: none;
}
.auth-content-panel__brand {
display: flex;
}
.auth-content-panel {
padding: var(--space-4);
}
.auth-content-panel__title {
font-size: var(--text-xl);
}
}
.auth-form {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.auth-hint {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
font-weight: var(--font-medium);
}
.auth-hint--ok {
color: var(--success-600);
}
.auth-hint--warn {
color: var(--text-muted);
}
.auth-hint .bi {
font-size: 13px;
}
.auth-password-wrap .ds-input {
padding-right: 44px; /* espacio para el botón de ojo */
}
.auth-password-toggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: transparent;
border: none;
color: var(--text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.auth-password-toggle:hover {
background-color: var(--bg-hover);
color: var(--text-primary);
}
.auth-password-toggle:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 1px;
}
.auth-submit {
margin-top: var(--space-3);
}
/* ============================================================
2. PANEL — Armazón de las pantallas internas
Estructura:
.panel-header barra superior fija (marca + acciones)
.panel-shell contenedor del contenido de cada página
.menu-macro-grid grid de tarjetas de navegación
============================================================ */
.panel-header {
position: sticky;
top: 0;
z-index: 50;
background-color: var(--bg-card);
box-shadow: var(--shadow);
}
.panel-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
max-width: 1280px;
margin: 0 auto;
padding: 10px var(--space-5);
}
.panel-header__brand {
display: flex;
align-items: center;
gap: var(--space-3);
min-width: 0;
}
.panel-header__logo {
width: 36px;
height: 36px;
object-fit: contain;
border-radius: var(--radius-md);
flex-shrink: 0;
}
.panel-header__brand-name {
font-size: var(--text-md);
font-weight: var(--font-semibold);
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.panel-header__actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.panel-header__context {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
/* ---- Título de grupo dentro de la sección ---- */
.checkout-group-title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin: var(--space-5) 0 var(--space-3);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--border);
text-align: left;
}
.checkout-group-title:first-child {
margin-top: 0;
}
.panel-header__title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin: 0;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.panel-header__meta {
font-size: var(--text-xs);
color: var(--text-secondary);
margin: 0;
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.panel-header__sep {
color: var(--text-muted);
}
.panel-header__logo {
width: 44px;
height: 44px;
}
.panel-shell {
background-color: var(--bg-page);
min-height: calc(100vh - 64px);
padding: var(--space-6) var(--space-5);
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-5);
}
@media (max-width: 900px) {
.panel-header__inner {
padding: 8px var(--space-4);
}
.panel-header__brand-name {
font-size: var(--text-sm);
}
.panel-shell {
padding: var(--space-4) var(--space-3);
gap: var(--space-4);
}
.panel-header__logo {
width: 36px;
height: 36px;
}
.panel-header__title {
font-size: var(--text-base);
}
.panel-header__meta {
font-size: 11px;
}
}
.menu-macro-logout {
color: var(--text-danger);
}
.menu-macro-logout:hover {
background-color: var(--state-danger-bg);
}
.menu-macro-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.menu-macro-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-5);
background-color: var(--bg-card);
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer;
text-align: left;
font-family: var(--font-sans);
box-shadow: var(--shadow);
transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
min-height: 180px;
overflow: hidden;
}
.menu-macro-card:hover {
border-color: var(--primary-500);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.menu-macro-card__icon {
width: 52px;
height: 52px;
border-radius: var(--radius-md);
background-color: var(--primary-50);
color: var(--primary-500);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: var(--space-3);
transition: background-color var(--transition-base), color var(--transition-base);
}
.menu-macro-card:hover .menu-macro-card__icon {
background-color: var(--primary-500);
color: var(--bg-card);
}
.menu-macro-card__title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
line-height: 1.2;
margin-bottom: var(--space-1);
}
.menu-macro-card__desc {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-normal);
flex: 1;
}
.menu-macro-card__arrow {
position: absolute;
top: var(--space-5);
right: var(--space-5);
color: var(--text-muted);
font-size: 18px;
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}
.menu-macro-card:hover .menu-macro-card__arrow {
opacity: 1;
transform: translateX(0);
color: var(--text-accent);
}
@media (max-width: 1280px) {
.menu-macro-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1024px) {
.menu-macro-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.menu-macro-grid {
grid-template-columns: 1fr;
}
.menu-macro-card {
min-height: auto;
padding: var(--space-4);
}
.menu-macro-card__icon {
width: 44px;
height: 44px;
font-size: 20px;
}
.menu-macro-card__title {
font-size: var(--text-base);
}
.menu-macro-card__arrow {
top: var(--space-4);
right: var(--space-4);
opacity: 1;
transform: none;
}
}
.ds-checklist {
list-style: none;
padding: 0;
margin: var(--space-2) 0 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.ds-checklist__item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-muted);
transition: color var(--transition-fast);
}
.ds-checklist__item .bi {
font-size: var(--icon-sm);
}
.ds-checklist__item.is-ok {
color: var(--text-success);
}
/* ---- HERO: saludo de la pantalla de menú ---- */
.panel-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.panel-hero__greeting {
font-size: var(--text-2xl);
font-weight: var(--font-semibold);
color: var(--text-primary);
line-height: var(--leading-tight);
}
.panel-hero__date {
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--text-muted);
text-transform: capitalize;
}
/* ---- STEPS: guía fija de tres pasos ---- */
.panel-steps {
margin-top: var(--space-10);
padding: var(--space-6);
background-color: var(--bg-subtle);
border-radius: var(--radius-lg);
}
.panel-steps__title {
font-size: var(--text-md);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: var(--space-5);
}
.panel-steps__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.panel-step {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.panel-step__num {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background-color: var(--accent-soft);
color: var(--accent-600);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
}
.panel-step__title {
font-size: var(--text-base);
font-weight: var(--font-medium);
color: var(--text-primary);
margin-bottom: 2px;
}
.panel-step__desc {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-normal);
}
/* ---- FOOT: pie de las pantallas internas ---- */
.panel-foot {
margin-top: var(--space-10);
padding-top: var(--space-5);
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-muted);
}
.panel-foot .bi {
font-size: var(--icon-sm);
}
@media (max-width: 900px) {
.panel-steps__list {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.panel-hero__greeting {
font-size: var(--text-xl);
}
}
/* ============================================================
ECOUNTIA FACTURACIÓN — ESTILOS PROPIOS
Todo lo que este proyecto necesita y no está en el design
system compartido (tokens / base / components / utilities).
Requiere que tokens.css esté cargado antes: todas las reglas
de aquí usan sus variables.
Contenido:
1. AUTH -> login y registro (portado de appv5.css)
2. PANEL -> cabecera y menú interno (portado de appv5.css)
3. EXTRAS -> componentes que no existen en el DS
============================================================ */
/* ============================================================
1. AUTH — Login y registro
Estructura:
.auth-page contenedor full-screen
.auth-shell grid de 2 columnas
.auth-brand-panel izquierda (azul, branding). Oculta bajo 900px
.auth-content-panel derecha (blanco, formulario). Full en móvil
============================================================ */
.auth-page {
min-height: 100vh;
background-color: var(--bg-page);
display: flex;
align-items: stretch;
}
.auth-shell {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
.auth-brand-panel {
background-color: var(--primary-900);
color: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-12) var(--space-10);
position: relative;
overflow: hidden;
}
.auth-brand-panel__inner {
max-width: 440px;
width: 100%;
position: relative;
z-index: 1;
}
.auth-brand-panel__logo {
width: 64px;
height: 64px;
object-fit: contain;
margin-bottom: var(--space-6);
}
.auth-brand-panel__heading {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
color: var(--neutral-0);
margin: 0 0 var(--space-3);
}
.auth-brand-panel__highlight {
color: var(--accent-400);
font-weight: var(--font-bold);
display: inline-block;
}
.auth-brand-panel__lead {
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.85);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-8);
}
.auth-brand-panel__bullets {
display: flex;
flex-direction: column;
gap: var(--space-5);
margin-bottom: var(--space-10);
}
.auth-bullet {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.auth-bullet__icon {
width: 38px;
height: 38px;
border-radius: var(--radius-md);
background-color: rgba(0, 194, 204, 0.18);
color: var(--accent-300);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.auth-bullet__title {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--neutral-0);
margin-bottom: 2px;
}
.auth-bullet__desc {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
line-height: var(--leading-normal);
}
.auth-brand-panel__footer {
display: flex;
align-items: center;
gap: var(--space-2);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.15);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
line-height: var(--leading-normal);
}
.auth-brand-panel__footer i {
color: var(--accent-400);
font-size: 16px;
flex-shrink: 0;
}
.auth-content-panel {
background-color: var(--bg-card);
display: flex;
flex-direction: column;
padding: var(--space-5) var(--space-6);
position: relative;
}
.auth-content-panel__topbar {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: var(--space-4);
}
.auth-content-panel__inner {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
width: 100%;
max-width: 460px;
margin: 0 auto;
padding-bottom: var(--space-10);
}
.auth-content-panel__brand {
display: none;
justify-content: center;
margin-bottom: var(--space-5);
}
.auth-content-panel__logo {
width: 56px;
height: 56px;
object-fit: contain;
}
.auth-content-panel__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
margin: 0 0 var(--space-2);
text-align: center;
line-height: var(--leading-tight);
}
.auth-content-panel__subtitle {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0 0 var(--space-6);
text-align: center;
line-height: var(--leading-normal);
}
.auth-content-panel__foot {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-5);
font-size: var(--text-xs);
color: var(--text-muted);
}
.auth-content-panel__foot i {
color: var(--text-accent);
}
@media (max-width: 900px) {
.auth-shell {
grid-template-columns: 1fr;
}
.auth-brand-panel {
display: none;
}
.auth-content-panel__brand {
display: flex;
}
.auth-content-panel {
padding: var(--space-4);
}
.auth-content-panel__title {
font-size: var(--text-xl);
}
}
.auth-form {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.auth-hint {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
font-weight: var(--font-medium);
}
.auth-hint--ok {
color: var(--success-600);
}
.auth-hint--warn {
color: var(--text-muted);
}
.auth-hint .bi {
font-size: 13px;
}
.auth-password-wrap .ds-input {
padding-right: 44px; /* espacio para el botón de ojo */
}
.auth-password-toggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: transparent;
border: none;
color: var(--text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.auth-password-toggle:hover {
background-color: var(--bg-hover);
color: var(--text-primary);
}
.auth-password-toggle:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 1px;
}
.auth-submit {
margin-top: var(--space-3);
}
/* 3 columnas: el facturador tiene 3 módulos. El menú de firmas usa 4
porque allá hay nueve tarjetas. */
.menu-macro-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.menu-macro-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-5);
background-color: var(--bg-card);
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer;
text-align: left;
font-family: var(--font-sans);
box-shadow: var(--shadow);
transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
min-height: 180px;
overflow: hidden;
}
.menu-macro-card:hover {
border-color: var(--primary-500);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.menu-macro-card__icon {
width: 52px;
height: 52px;
border-radius: var(--radius-md);
background-color: var(--primary-50);
color: var(--primary-500);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: var(--space-3);
transition: background-color var(--transition-base), color var(--transition-base);
}
.menu-macro-card:hover .menu-macro-card__icon {
background-color: var(--primary-500);
color: var(--bg-card);
}
.menu-macro-card__title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
line-height: 1.2;
margin-bottom: var(--space-1);
}
.menu-macro-card__desc {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-normal);
flex: 1;
}
.menu-macro-card__arrow {
position: absolute;
top: var(--space-5);
right: var(--space-5);
color: var(--text-muted);
font-size: 18px;
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}
.menu-macro-card:hover .menu-macro-card__arrow {
opacity: 1;
transform: translateX(0);
color: var(--text-accent);
}
@media (max-width: 1024px) {
.menu-macro-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.menu-macro-grid {
grid-template-columns: 1fr;
}
.menu-macro-card {
min-height: auto;
padding: var(--space-4);
}
.menu-macro-card__icon {
width: 44px;
height: 44px;
font-size: 20px;
}
.menu-macro-card__title {
font-size: var(--text-base);
}
.menu-macro-card__arrow {
top: var(--space-4);
right: var(--space-4);
opacity: 1;
transform: none;
}
}
/* ============================================================
3. EXTRAS — Componentes que no existen en el design system
Si alguno se estabiliza, conviene llevarlo a components.css
del proyecto de firmas para que ambos productos lo tengan.
============================================================ */
/* ---- CHECKLIST: requisitos que se cumplen en vivo ----
*/
.ds-checklist {
list-style: none;
padding: 0;
margin: var(--space-2) 0 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.ds-checklist__item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-muted);
transition: color var(--transition-fast);
}
.ds-checklist__item .bi {
font-size: var(--icon-sm);
}
.ds-checklist__item.is-ok {
color: var(--text-success);
}
/* ---- HERO: saludo de la pantalla de menú ---- */
.panel-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.panel-hero__greeting {
font-size: var(--text-2xl);
font-weight: var(--font-semibold);
color: var(--text-primary);
line-height: var(--leading-tight);
}
.panel-hero__date {
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--text-muted);
text-transform: capitalize;
}
/* ---- STEPS: guía fija de tres pasos ---- */
.panel-steps {
margin-top: var(--space-10);
padding: var(--space-6);
background-color: var(--bg-subtle);
border-radius: var(--radius-lg);
}
.panel-steps__title {
font-size: var(--text-md);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: var(--space-5);
}
.panel-steps__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.panel-step {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.panel-step__num {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background-color: var(--accent-soft);
color: var(--accent-600);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
}
.panel-step__title {
font-size: var(--text-base);
font-weight: var(--font-medium);
color: var(--text-primary);
margin-bottom: 2px;
}
.panel-step__desc {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-normal);
}
/* ---- FOOT: pie de las pantallas internas ---- */
.panel-foot {
margin-top: var(--space-10);
padding-top: var(--space-5);
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-muted);
}
.panel-foot .bi {
font-size: var(--icon-sm);
}
@media (max-width: 900px) {
.panel-steps__list {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.panel-hero__greeting {
font-size: var(--text-xl);
}
}
/* ---- Tarjeta de módulo aún no disponible ----
*/
.menu-macro-card--pronto {
cursor: default;
opacity: 0.6;
border-style: dashed;
box-shadow: none;
}
.menu-macro-card--pronto:hover {
border-color: var(--border);
transform: none;
box-shadow: none;
}
.menu-macro-card--pronto .menu-macro-card__arrow {
display: none;
}
.menu-macro-card__badge {
position: absolute;
top: var(--space-4);
right: var(--space-4);
padding: 2px var(--space-2);
border-radius: var(--radius-full);
background-color: var(--bg-subtle);
color: var(--text-muted);
font-size: var(--text-xs);
font-weight: var(--font-medium);
}
/* ---- TOGGLE (switch on/off) ----
*/
.ds-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-3);
cursor: pointer;
user-select: none;
}
.ds-toggle input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ds-toggle__track {
position: relative;
flex-shrink: 0;
width: 40px;
height: 24px;
background-color: var(--neutral-300);
border-radius: var(--radius-full);
transition: background-color var(--transition-base);
}
.ds-toggle__track::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: var(--neutral-0);
border-radius: var(--radius-full);
box-shadow: var(--shadow);
transition: transform var(--transition-base);
}
.ds-toggle input:checked + .ds-toggle__track {
background-color: var(--primary-500);
}
.ds-toggle input:checked + .ds-toggle__track::after {
transform: translateX(16px);
}
.ds-toggle input:focus-visible + .ds-toggle__track {
outline: 2px solid var(--border-focus);
outline-offset: 2px;
}
.ds-toggle__label {
font-size: var(--text-base);
color: var(--text-primary);
}
/* ---- Input compacto para filas de tabla ---- */
.ds-input--sm {
padding: var(--space-1) var(--space-2);
font-size: var(--text-sm);
height: auto;
}
/* ============================================================
ECOUNTIA FACTURACIÓN — ESTILOS PROPIOS
Todo lo que este proyecto necesita y no está en el design
system compartido (tokens / base / components / utilities).
Requiere que tokens.css esté cargado antes: todas las reglas
de aquí usan sus variables.
Contenido:
1. AUTH -> login y registro (portado de appv5.css)
2. PANEL -> cabecera y menú interno (portado de appv5.css)
3. EXTRAS -> componentes que no existen en el DS
============================================================ */
/* ============================================================
1. AUTH — Login y registro
Estructura:
.auth-page contenedor full-screen
.auth-shell grid de 2 columnas
.auth-brand-panel izquierda (azul, branding). Oculta bajo 900px
.auth-content-panel derecha (blanco, formulario). Full en móvil
============================================================ */
.auth-page {
min-height: 100vh;
background-color: var(--bg-page);
display: flex;
align-items: stretch;
}
.auth-shell {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
.auth-brand-panel {
background-color: var(--primary-900);
color: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-12) var(--space-10);
position: relative;
overflow: hidden;
}
.auth-brand-panel__inner {
max-width: 440px;
width: 100%;
position: relative;
z-index: 1;
}
.auth-brand-panel__logo {
width: 64px;
height: 64px;
object-fit: contain;
margin-bottom: var(--space-6);
}
.auth-brand-panel__heading {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
color: var(--neutral-0);
margin: 0 0 var(--space-3);
}
.auth-brand-panel__highlight {
color: var(--accent-400);
font-weight: var(--font-bold);
display: inline-block;
}
.auth-brand-panel__lead {
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.85);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-8);
}
.auth-brand-panel__bullets {
display: flex;
flex-direction: column;
gap: var(--space-5);
margin-bottom: var(--space-10);
}
.auth-bullet {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.auth-bullet__icon {
width: 38px;
height: 38px;
border-radius: var(--radius-md);
background-color: rgba(0, 194, 204, 0.18);
color: var(--accent-300);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.auth-bullet__title {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--neutral-0);
margin-bottom: 2px;
}
.auth-bullet__desc {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
line-height: var(--leading-normal);
}
.auth-brand-panel__footer {
display: flex;
align-items: center;
gap: var(--space-2);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.15);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
line-height: var(--leading-normal);
}
.auth-brand-panel__footer i {
color: var(--accent-400);
font-size: 16px;
flex-shrink: 0;
}
.auth-content-panel {
background-color: var(--bg-card);
display: flex;
flex-direction: column;
padding: var(--space-5) var(--space-6);
position: relative;
}
.auth-content-panel__topbar {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: var(--space-4);
}
.auth-content-panel__inner {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
width: 100%;
max-width: 460px;
margin: 0 auto;
padding-bottom: var(--space-10);
}
.auth-content-panel__brand {
display: none;
justify-content: center;
margin-bottom: var(--space-5);
}
.auth-content-panel__logo {
width: 56px;
height: 56px;
object-fit: contain;
}
.auth-content-panel__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
margin: 0 0 var(--space-2);
text-align: center;
line-height: var(--leading-tight);
}
.auth-content-panel__subtitle {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0 0 var(--space-6);
text-align: center;
line-height: var(--leading-normal);
}
.auth-content-panel__foot {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-5);
font-size: var(--text-xs);
color: var(--text-muted);
}
.auth-content-panel__foot i {
color: var(--text-accent);
}
@media (max-width: 900px) {
.auth-shell {
grid-template-columns: 1fr;
}
.auth-brand-panel {
display: none;
}
.auth-content-panel__brand {
display: flex;
}
.auth-content-panel {
padding: var(--space-4);
}
.auth-content-panel__title {
font-size: var(--text-xl);
}
}
.auth-form {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.auth-hint {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
font-weight: var(--font-medium);
}
.auth-hint--ok {
color: var(--success-600);
}
.auth-hint--warn {
color: var(--text-muted);
}
.auth-hint .bi {
font-size: 13px;
}
.auth-password-wrap .ds-input {
padding-right: 44px; /* espacio para el botón de ojo */
}
.auth-password-toggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: transparent;
border: none;
color: var(--text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.auth-password-toggle:hover {
background-color: var(--bg-hover);
color: var(--text-primary);
}
.auth-password-toggle:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 1px;
}
.auth-submit {
margin-top: var(--space-3);
}
/* 3 columnas: el facturador tiene 3 módulos. El menú de firmas usa 4
porque allá hay nueve tarjetas. */
.menu-macro-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.menu-macro-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-5);
background-color: var(--bg-card);
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer;
text-align: left;
font-family: var(--font-sans);
box-shadow: var(--shadow);
transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
min-height: 180px;
overflow: hidden;
}
.menu-macro-card:hover {
border-color: var(--primary-500);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.menu-macro-card__icon {
width: 52px;
height: 52px;
border-radius: var(--radius-md);
background-color: var(--primary-50);
color: var(--primary-500);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: var(--space-3);
transition: background-color var(--transition-base), color var(--transition-base);
}
.menu-macro-card:hover .menu-macro-card__icon {
background-color: var(--primary-500);
color: var(--bg-card);
}
.menu-macro-card__title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
line-height: 1.2;
margin-bottom: var(--space-1);
}
.menu-macro-card__desc {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-normal);
flex: 1;
}
.menu-macro-card__arrow {
position: absolute;
top: var(--space-5);
right: var(--space-5);
color: var(--text-muted);
font-size: 18px;
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}
.menu-macro-card:hover .menu-macro-card__arrow {
opacity: 1;
transform: translateX(0);
color: var(--text-accent);
}
@media (max-width: 1024px) {
.menu-macro-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.menu-macro-grid {
grid-template-columns: 1fr;
}
.menu-macro-card {
min-height: auto;
padding: var(--space-4);
}
.menu-macro-card__icon {
width: 44px;
height: 44px;
font-size: 20px;
}
.menu-macro-card__title {
font-size: var(--text-base);
}
.menu-macro-card__arrow {
top: var(--space-4);
right: var(--space-4);
opacity: 1;
transform: none;
}
}
/* ============================================================
3. EXTRAS — Componentes que no existen en el design system
Si alguno se estabiliza, conviene llevarlo a components.css
del proyecto de firmas para que ambos productos lo tengan.
============================================================ */
/* ---- CHECKLIST: requisitos que se cumplen en vivo ----
*/
.ds-checklist {
list-style: none;
padding: 0;
margin: var(--space-2) 0 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.ds-checklist__item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-muted);
transition: color var(--transition-fast);
}
.ds-checklist__item .bi {
font-size: var(--icon-sm);
}
.ds-checklist__item.is-ok {
color: var(--text-success);
}
/* ---- HERO: saludo de la pantalla de menú ---- */
.panel-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.panel-hero__greeting {
font-size: var(--text-2xl);
font-weight: var(--font-semibold);
color: var(--text-primary);
line-height: var(--leading-tight);
}
.panel-hero__date {
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--text-muted);
text-transform: capitalize;
}
/* ---- STEPS: guía fija de tres pasos ---- */
.panel-steps {
margin-top: var(--space-10);
padding: var(--space-6);
background-color: var(--bg-subtle);
border-radius: var(--radius-lg);
}
.panel-steps__title {
font-size: var(--text-md);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: var(--space-5);
}
.panel-steps__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.panel-step {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.panel-step__num {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background-color: var(--accent-soft);
color: var(--accent-600);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
}
.panel-step__title {
font-size: var(--text-base);
font-weight: var(--font-medium);
color: var(--text-primary);
margin-bottom: 2px;
}
.panel-step__desc {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-normal);
}
/* ---- FOOT: pie de las pantallas internas ---- */
.panel-foot {
margin-top: var(--space-10);
padding-top: var(--space-5);
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-muted);
}
.panel-foot .bi {
font-size: var(--icon-sm);
}
@media (max-width: 900px) {
.panel-steps__list {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.panel-hero__greeting {
font-size: var(--text-xl);
}
}
/* ---- Tarjeta de módulo aún no disponible ----
*/
.menu-macro-card--pronto {
cursor: default;
opacity: 0.6;
border-style: dashed;
box-shadow: none;
}
.menu-macro-card--pronto:hover {
border-color: var(--border);
transform: none;
box-shadow: none;
}
.menu-macro-card--pronto .menu-macro-card__arrow {
display: none;
}
.menu-macro-card__badge {
position: absolute;
top: var(--space-4);
right: var(--space-4);
padding: 2px var(--space-2);
border-radius: var(--radius-full);
background-color: var(--bg-subtle);
color: var(--text-muted);
font-size: var(--text-xs);
font-weight: var(--font-medium);
}
/* ---- TOGGLE (switch on/off) ----
*/
.ds-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-3);
cursor: pointer;
user-select: none;
}
.ds-toggle input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ds-toggle__track {
position: relative;
flex-shrink: 0;
width: 40px;
height: 24px;
background-color: var(--neutral-300);
border-radius: var(--radius-full);
transition: background-color var(--transition-base);
}
.ds-toggle__track::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: var(--neutral-0);
border-radius: var(--radius-full);
box-shadow: var(--shadow);
transition: transform var(--transition-base);
}
.ds-toggle input:checked + .ds-toggle__track {
background-color: var(--primary-500);
}
.ds-toggle input:checked + .ds-toggle__track::after {
transform: translateX(16px);
}
.ds-toggle input:focus-visible + .ds-toggle__track {
outline: 2px solid var(--border-focus);
outline-offset: 2px;
}
.ds-toggle__label {
font-size: var(--text-base);
color: var(--text-primary);
}
/* ---- Input compacto para filas de tabla ---- */
.ds-input--sm {
padding: var(--space-1) var(--space-2);
font-size: var(--text-sm);
height: auto;
}
/* ============================================================
EMISIÓN DE FACTURA
============================================================ */
/* ---- Detalle: celdas ajustadas para inputs ---- */
.fe-detalle td {
padding: var(--space-2);
vertical-align: top;
}
.fe-detalle .ds-input--sm {
width: 100%;
}
/* ---- Autocompletado flotante ---- */
.fe-desc {
position: relative;
}
.fe-suggest {
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
z-index: 30;
background-color: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-modal);
max-height: 240px;
overflow-y: auto;
}
.fe-suggest__item {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-2) var(--space-3);
border: none;
background: transparent;
text-align: left;
font-size: var(--text-sm);
color: var(--text-primary);
cursor: pointer;
transition: background-color var(--transition-fast);
z-index: 9999;
}
.fe-suggest__item:hover {
background-color: var(--bg-hover);
}
.fe-suggest__item + .fe-suggest__item {
border-top: 1px solid var(--border);
}
/* ---- Totales ---- */
.fe-totales {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.fe-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--text-sm);
color: var(--text-secondary);
}
.fe-total-row--grand {
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--border);
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
}
/* ============================================================
ECOUNTIA FACTURACIÓN — ESTILOS PROPIOS
Todo lo que este proyecto necesita y no está en el design
system compartido (tokens / base / components / utilities).
Requiere que tokens.css esté cargado antes: todas las reglas
de aquí usan sus variables.
Contenido:
1. AUTH -> login y registro (portado de appv5.css)
2. PANEL -> cabecera y menú interno (portado de appv5.css)
3. EXTRAS -> componentes que no existen en el DS
============================================================ */
/* ============================================================
1. AUTH — Login y registro
Estructura:
.auth-page contenedor full-screen
.auth-shell grid de 2 columnas
.auth-brand-panel izquierda (azul, branding). Oculta bajo 900px
.auth-content-panel derecha (blanco, formulario). Full en móvil
============================================================ */
.auth-page {
min-height: 100vh;
background-color: var(--bg-page);
display: flex;
align-items: stretch;
}
.auth-shell {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
}
.auth-brand-panel {
background-color: var(--primary-900);
color: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-12) var(--space-10);
position: relative;
overflow: hidden;
}
.auth-brand-panel__inner {
max-width: 440px;
width: 100%;
position: relative;
z-index: 1;
}
.auth-brand-panel__logo {
width: 64px;
height: 64px;
object-fit: contain;
margin-bottom: var(--space-6);
}
.auth-brand-panel__heading {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
color: var(--neutral-0);
margin: 0 0 var(--space-3);
}
.auth-brand-panel__highlight {
color: var(--accent-400);
font-weight: var(--font-bold);
display: inline-block;
}
.auth-brand-panel__lead {
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.85);
line-height: var(--leading-relaxed);
margin: 0 0 var(--space-8);
}
.auth-brand-panel__bullets {
display: flex;
flex-direction: column;
gap: var(--space-5);
margin-bottom: var(--space-10);
}
.auth-bullet {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.auth-bullet__icon {
width: 38px;
height: 38px;
border-radius: var(--radius-md);
background-color: rgba(0, 194, 204, 0.18);
color: var(--accent-300);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.auth-bullet__title {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--neutral-0);
margin-bottom: 2px;
}
.auth-bullet__desc {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
line-height: var(--leading-normal);
}
.auth-brand-panel__footer {
display: flex;
align-items: center;
gap: var(--space-2);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.15);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
line-height: var(--leading-normal);
}
.auth-brand-panel__footer i {
color: var(--accent-400);
font-size: 16px;
flex-shrink: 0;
}
.auth-content-panel {
background-color: var(--bg-card);
display: flex;
flex-direction: column;
padding: var(--space-5) var(--space-6);
position: relative;
}
.auth-content-panel__topbar {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: var(--space-4);
}
.auth-content-panel__inner {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
width: 100%;
max-width: 460px;
margin: 0 auto;
padding-bottom: var(--space-10);
}
.auth-content-panel__brand {
display: none;
justify-content: center;
margin-bottom: var(--space-5);
}
.auth-content-panel__logo {
width: 56px;
height: 56px;
object-fit: contain;
}
.auth-content-panel__title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
margin: 0 0 var(--space-2);
text-align: center;
line-height: var(--leading-tight);
}
.auth-content-panel__subtitle {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: 0 0 var(--space-6);
text-align: center;
line-height: var(--leading-normal);
}
.auth-content-panel__foot {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-5);
font-size: var(--text-xs);
color: var(--text-muted);
}
.auth-content-panel__foot i {
color: var(--text-accent);
}
@media (max-width: 900px) {
.auth-shell {
grid-template-columns: 1fr;
}
.auth-brand-panel {
display: none;
}
.auth-content-panel__brand {
display: flex;
}
.auth-content-panel {
padding: var(--space-4);
}
.auth-content-panel__title {
font-size: var(--text-xl);
}
}
.auth-form {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.auth-hint {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
font-weight: var(--font-medium);
}
.auth-hint--ok {
color: var(--success-600);
}
.auth-hint--warn {
color: var(--text-muted);
}
.auth-hint .bi {
font-size: 13px;
}
.auth-password-wrap .ds-input {
padding-right: 44px; /* espacio para el botón de ojo */
}
.auth-password-toggle {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: transparent;
border: none;
color: var(--text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.auth-password-toggle:hover {
background-color: var(--bg-hover);
color: var(--text-primary);
}
.auth-password-toggle:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 1px;
}
.auth-submit {
margin-top: var(--space-3);
}
/* 3 columnas: el facturador tiene 3 módulos. El menú de firmas usa 4
porque allá hay nueve tarjetas. */
.menu-macro-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.menu-macro-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-5);
background-color: var(--bg-card);
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer;
text-align: left;
font-family: var(--font-sans);
box-shadow: var(--shadow);
transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
min-height: 180px;
overflow: hidden;
}
.menu-macro-card:hover {
border-color: var(--primary-500);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.menu-macro-card__icon {
width: 52px;
height: 52px;
border-radius: var(--radius-md);
background-color: var(--primary-50);
color: var(--primary-500);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
margin-bottom: var(--space-3);
transition: background-color var(--transition-base), color var(--transition-base);
}
.menu-macro-card:hover .menu-macro-card__icon {
background-color: var(--primary-500);
color: var(--bg-card);
}
.menu-macro-card__title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
line-height: 1.2;
margin-bottom: var(--space-1);
}
.menu-macro-card__desc {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-normal);
flex: 1;
}
.menu-macro-card__arrow {
position: absolute;
top: var(--space-5);
right: var(--space-5);
color: var(--text-muted);
font-size: 18px;
opacity: 0;
transform: translateX(-4px);
transition: opacity var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}
.menu-macro-card:hover .menu-macro-card__arrow {
opacity: 1;
transform: translateX(0);
color: var(--text-accent);
}
@media (max-width: 1024px) {
.menu-macro-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.menu-macro-grid {
grid-template-columns: 1fr;
}
.menu-macro-card {
min-height: auto;
padding: var(--space-4);
}
.menu-macro-card__icon {
width: 44px;
height: 44px;
font-size: 20px;
}
.menu-macro-card__title {
font-size: var(--text-base);
}
.menu-macro-card__arrow {
top: var(--space-4);
right: var(--space-4);
opacity: 1;
transform: none;
}
}
/* ============================================================
3. EXTRAS — Componentes que no existen en el design system
Si alguno se estabiliza, conviene llevarlo a components.css
del proyecto de firmas para que ambos productos lo tengan.
============================================================ */
/* ---- CHECKLIST: requisitos que se cumplen en vivo ----
*/
.ds-checklist {
list-style: none;
padding: 0;
margin: var(--space-2) 0 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.ds-checklist__item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-muted);
transition: color var(--transition-fast);
}
.ds-checklist__item .bi {
font-size: var(--icon-sm);
}
.ds-checklist__item.is-ok {
color: var(--text-success);
}
/* ---- HERO: saludo de la pantalla de menú ---- */
.panel-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.panel-hero__greeting {
font-size: var(--text-2xl);
font-weight: var(--font-semibold);
color: var(--text-primary);
line-height: var(--leading-tight);
}
.panel-hero__date {
margin-top: var(--space-1);
font-size: var(--text-sm);
color: var(--text-muted);
text-transform: capitalize;
}
/* ---- STEPS: guía fija de tres pasos ---- */
.panel-steps {
margin-top: var(--space-10);
padding: var(--space-6);
background-color: var(--bg-subtle);
border-radius: var(--radius-lg);
}
.panel-steps__title {
font-size: var(--text-md);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: var(--space-5);
}
.panel-steps__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.panel-step {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.panel-step__num {
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background-color: var(--accent-soft);
color: var(--accent-600);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
}
.panel-step__title {
font-size: var(--text-base);
font-weight: var(--font-medium);
color: var(--text-primary);
margin-bottom: 2px;
}
.panel-step__desc {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-normal);
}
/* ---- FOOT: pie de las pantallas internas ---- */
.panel-foot {
margin-top: var(--space-10);
padding-top: var(--space-5);
border-top: 1px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--text-muted);
}
.panel-foot .bi {
font-size: var(--icon-sm);
}
@media (max-width: 900px) {
.panel-steps__list {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.panel-hero__greeting {
font-size: var(--text-xl);
}
}
/* ---- Tarjeta de módulo aún no disponible ----
*/
.menu-macro-card--pronto {
cursor: default;
opacity: 0.6;
border-style: dashed;
box-shadow: none;
}
.menu-macro-card--pronto:hover {
border-color: var(--border);
transform: none;
box-shadow: none;
}
.menu-macro-card--pronto .menu-macro-card__arrow {
display: none;
}
.menu-macro-card__badge {
position: absolute;
top: var(--space-4);
right: var(--space-4);
padding: 2px var(--space-2);
border-radius: var(--radius-full);
background-color: var(--bg-subtle);
color: var(--text-muted);
font-size: var(--text-xs);
font-weight: var(--font-medium);
}
/* ---- TOGGLE (switch on/off) ----
*/
.ds-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-3);
cursor: pointer;
user-select: none;
}
.ds-toggle input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ds-toggle__track {
position: relative;
flex-shrink: 0;
width: 40px;
height: 24px;
background-color: var(--neutral-300);
border-radius: var(--radius-full);
transition: background-color var(--transition-base);
}
.ds-toggle__track::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background-color: var(--neutral-0);
border-radius: var(--radius-full);
box-shadow: var(--shadow);
transition: transform var(--transition-base);
}
.ds-toggle input:checked + .ds-toggle__track {
background-color: var(--primary-500);
}
.ds-toggle input:checked + .ds-toggle__track::after {
transform: translateX(16px);
}
.ds-toggle input:focus-visible + .ds-toggle__track {
outline: 2px solid var(--border-focus);
outline-offset: 2px;
}
.ds-toggle__label {
font-size: var(--text-base);
color: var(--text-primary);
}
/* ---- Input compacto para filas de tabla ---- */
.ds-input--sm {
padding: var(--space-1) var(--space-2);
font-size: var(--text-sm);
height: auto;
}
/* ============================================================
EMISIÓN DE FACTURA
============================================================ */
/* ---- Detalle: celdas ajustadas para inputs ---- */
.fe-detalle td {
padding: var(--space-2);
vertical-align: top;
}
.fe-detalle .ds-input--sm {
width: 100%;
}
/* ---- Autocompletado flotante ---- */
.fe-desc {
position: relative;
}
.fe-suggest {
position: absolute;
top: calc(100% + 2px);
left: 0;
right: 0;
z-index: 30;
background-color: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-modal);
max-height: 240px;
overflow-y: auto;
}
.fe-suggest__item {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-2) var(--space-3);
border: none;
background: transparent;
text-align: left;
font-size: var(--text-sm);
color: var(--text-primary);
cursor: pointer;
transition: background-color var(--transition-fast);
}
.fe-suggest__item:hover {
background-color: var(--bg-hover);
}
.fe-suggest__item + .fe-suggest__item {
border-top: 1px solid var(--border);
}
/* ---- Totales ---- */
.fe-totales {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.fe-total-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--text-sm);
color: var(--text-secondary);
}
.fe-total-row--grand {
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--border);
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
}
/* ============================================================
HISTORIAL
============================================================ */
/* ---- Filtros en grilla que se adapta ---- */
.fe-filtros {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-4);
}
/* ---- Filas clicables ---- */
.fe-fila {
cursor: pointer;
transition: background-color var(--transition-fast);
}
.fe-fila:hover {
background-color: var(--bg-hover);
}
.fe-fila--activa {
background-color: var(--bg-subtle);
}
/* ---- Detalle expandible ---- */
.fe-detalle-row > td {
background-color: var(--bg-subtle);
padding: 0;
}
.fe-detalle-fac {
padding: var(--space-4) var(--space-5);
}
.fe-detalle-fac__datos {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
}
.fe-detalle-fac__acciones {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-4);
}
.boot-loading {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
gap: 18px;
align-items: center;
justify-content: center;
background-color: var(--bg-page);
z-index: 999999;
}
.boot-logo {
height: 11vh;
max-height: 92px;
width: auto;
object-fit: contain;
animation: pulseLogo 1.2s ease-in-out infinite;
}
@keyframes pulseLogo {
0% {
transform: scale(1);
opacity: 0.85;
}
50% {
transform: scale(1.02);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.85;
}
}
/* Barra */
.boot-bar {
width: min(360px, 78vw);
height: 10px;
border-radius: var(--radius-full);
background-color: var(--neutral-200);
overflow: hidden;
border: 1px solid rgba(23, 41, 91, 0.18);
}
.boot-bar-fill {
height: 100%;
width: 42%;
border-radius: 999px;
background: linear-gradient(90deg, #00c2cc, #44e0e0);
animation: boot-move 1.2s ease-in-out infinite;
}
.boot-text {
font-size: var(--text-sm);
color: var(--text-muted);
font-weight: var(--font-medium);
letter-spacing: 0.3px;
}
@keyframes boot-move {
0% {
transform: translateX(-120%);
}
50% {
transform: translateX(120%);
}
100% {
transform: translateX(220%);
}
}
/* ============================================================
BARRA DE PROGRESO
============================================================ */
.checkout-progress {
display: flex;
align-items: center;
gap: var(--space-4);
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-5) var(--space-2);
}
.checkout-progress__track {
flex: 1;
height: 4px;
background-color: var(--neutral-200);
border-radius: var(--radius-full);
overflow: hidden;
}
.checkout-progress__fill {
height: 100%;
background: var(--primary-500);
border-radius: var(--radius-full);
transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.checkout-progress__label {
font-size: var(--text-xs);
color: var(--text-muted);
white-space: nowrap;
font-weight: var(--font-medium);
}
/* ============================================================
TOAST DE REANUDACIÓN
============================================================ */
.checkout-toast-reanudando {
position: fixed;
top: 88px;
left: 50%;
transform: translateX(-50%);
background-color: var(--state-info-bg);
color: var(--state-info-text);
border: 1px solid var(--state-info-border);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
z-index: 60;
display: flex;
align-items: center;
gap: var(--space-2);
box-shadow: var(--shadow);
animation: checkout-toast-in var(--transition-base);
}
@keyframes checkout-toast-in {
from {
opacity: 0;
transform: translate(-50%, -10px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
/* ============================================================
SHELL (contenedor principal) + CARD CENTRAL
============================================================ */
.checkout-shell {
background-color: var(--bg-page);
min-height: calc(100vh - 120px);
padding: var(--space-8) var(--space-5);
display: flex;
justify-content: center;
}
.checkout-card {
width: 100%;
max-width: 720px;
background-color: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
padding: var(--space-8);
text-align: center;
}
/* ============================================================
ANIMACIÓN DE ENTRADA DE SECCIÓN
============================================================ */
.checkout-section-enter {
animation: checkout-section-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes checkout-section-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.checkout-section-enter {
animation: none;
}
.checkout-progress__fill {
transition: none;
}
}
/* ============================================================
PANTALLAS DE LOADING / ERROR (anteriores al header)
============================================================ */
.checkout-loading {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-3);
color: var(--text-secondary);
background-color: var(--bg-page);
}
.checkout-loading__icon {
font-size: 32px;
color: var(--text-accent);
animation: checkout-spin 0.9s linear infinite;
}
@keyframes checkout-spin {
to {
transform: rotate(360deg);
}
}
/* ============================================================
RESPONSIVE (móvil)
============================================================ */
@media (max-width: 640px) {
.checkout-header__inner {
padding: 8px var(--space-4);
}
.checkout-header__logo {
width: 32px;
height: 32px;
}
.checkout-header__title {
font-size: var(--text-sm);
}
.checkout-header__percent {
font-size: var(--text-sm);
}
.checkout-progress {
padding: 0 var(--space-4) var(--space-2);
gap: var(--space-3);
flex-wrap: wrap;
}
.checkout-progress__label {
font-size: 10px;
flex-basis: 100%;
margin-top: -2px;
}
/* En móvil, el shell pierde el fondo y la card se pega al header */
.checkout-shell {
padding: 0;
background-color: var(--bg-card);
min-height: auto;
}
.checkout-card {
max-width: 100%;
border: none;
border-radius: 0;
box-shadow: none;
padding: var(--space-5) var(--space-4) var(--space-6);
}
.checkout-toast-reanudando {
top: 80px;
max-width: calc(100% - var(--space-6));
font-size: var(--text-xs);
}
}
/* ============================================================
SUSCRIPCIÓN — flujo de registro por planes
Agregar a appv5.css. Reutiliza tokens y clases ds-* existentes.
REQUIERE copiar de Firmas (si no están ya en facturación):
- .checkout-progress, .checkout-progress__track/__fill/__label
- .checkout-shell, .checkout-card, .checkout-section-enter
- .panel-header--checkout (y panel-header* base)
El layout de suscripción reutiliza esas clases tal cual.
============================================================ */
/* ---- Cabecera del contenido del paso ---- */
.sus-title {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
line-height: var(--leading-tight);
margin: 0 0 var(--space-2);
text-align: center;
}
.sus-subtitle {
font-size: var(--text-sm);
color: var(--text-secondary);
text-align: center;
margin: 0 0 var(--space-6);
}
/* ---- RUC ---- */
.sus-ruc {
max-width: 420px;
width: 100%;
margin: 0 auto var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* ---- Grid de planes ---- */
.sus-planes {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-4);
margin-top: var(--space-5);
}
/* Tarjeta de plan: basada en el patrón de menu-macro-card. */
.sus-plan {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-5);
background-color: var(--bg-card);
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
cursor: pointer;
text-align: left;
font-family: var(--font-sans);
box-shadow: var(--shadow);
transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
overflow: hidden;
}
.sus-plan:hover {
border-color: var(--primary-500);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.sus-plan.is-selected {
border-color: var(--primary-500);
box-shadow: 0 0 0 3px var(--primary-50);
}
.sus-plan--star {
border-color: var(--accent-400);
}
.sus-plan__badge {
position: absolute;
top: var(--space-3);
right: var(--space-3);
padding: 2px var(--space-2);
border-radius: var(--radius-full);
background-color: var(--accent-soft);
color: var(--accent-600);
font-size: var(--text-xs);
font-weight: var(--font-semibold);
}
.sus-plan__nombre {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
line-height: 1.2;
padding-right: var(--space-8);
}
.sus-plan__desc {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: var(--leading-normal);
}
.sus-plan__precio {
display: flex;
align-items: baseline;
gap: var(--space-2);
margin-top: var(--space-2);
flex-wrap: wrap;
}
.sus-plan__precio-tachado {
font-size: var(--text-sm);
color: var(--text-muted);
text-decoration: line-through;
}
.sus-plan__precio-final {
font-size: var(--text-2xl);
font-weight: var(--font-bold);
color: var(--text-primary);
}
.sus-plan__periodo {
font-size: var(--text-sm);
color: var(--text-muted);
}
.sus-plan__descuento {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: var(--text-xs);
font-weight: var(--font-medium);
color: var(--success-600);
}
.sus-plan__check {
position: absolute;
bottom: var(--space-4);
right: var(--space-4);
color: var(--primary-500);
font-size: 20px;
opacity: 0;
transition: opacity var(--transition-fast);
}
.sus-plan.is-selected .sus-plan__check {
opacity: 1;
}
.sus-continuar {
margin-top: var(--space-6);
max-width: 420px;
width: 100%;
align-self: center;
}
@media (max-width: 640px) {
.sus-planes {
grid-template-columns: 1fr;
}
.sus-title {
font-size: var(--text-xl);
}
}
/* ============================================================
PASO 2 — Formulario y resumen de confirmación
============================================================ */
.sus-form {
width: 100%;
margin: 0 auto var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
/* Datos en dos columnas (desktop). La contraseña queda fuera, a lo ancho. */
.sus-form__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-2) var(--space-4);
}
/* El grid de contraseñas: la izquierda tiene checklist debajo, así que se alinean
al tope para que la confirmación no se estire a la altura del checklist. */
.sus-form__grid--top {
align-items: start;
}
@media (max-width: 640px) {
.sus-form__grid {
grid-template-columns: 1fr;
}
}
/* ---- Confirmación ---- */
.sus-ok {
text-align: center;
margin-bottom: var(--space-5);
}
.sus-ok__icon {
font-size: 48px;
color: var(--success-600);
line-height: 1;
margin-bottom: var(--space-3);
}
.sus-resumen {
max-width: 460px;
width: 100%;
margin: 0 auto;
background-color: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--space-4) var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.sus-resumen__row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-4);
font-size: var(--text-sm);
}
.sus-resumen__label {
color: var(--text-muted);
flex-shrink: 0;
}
.sus-resumen__value {
color: var(--text-primary);
font-weight: var(--font-medium);
text-align: right;
}
.sus-resumen__row--total {
margin-top: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--border);
font-size: var(--text-lg);
}
.sus-resumen__row--total .sus-resumen__value {
font-weight: var(--font-bold);
}
/* ============================================================
SKELETON PARA EL SELECT DE CIUDAD
============================================================ */
.checkout-ciudad-skeleton {
height: 42px;
width: 100%;
}
/* ============================================================
CHECKOUT CIUDAD — combo con autocomplete y dropdown
============================================================ */
.checkout-ciudad {
position: relative;
}
.checkout-ciudad__input {
padding-right: 64px; /* espacio para chevron + icono check */
}
/* Cuando hay selección válida, el chevron se hace lugar al icono */
.checkout-ciudad__icon {
right: 36px;
}
.checkout-ciudad__chevron {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
background: transparent;
border: none;
color: var(--text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.checkout-ciudad__chevron:hover {
background-color: var(--bg-hover);
color: var(--text-primary);
}
.checkout-ciudad__chevron i {
transition: transform var(--transition-fast);
}
.checkout-ciudad__chevron.is-open i {
transform: rotate(180deg);
}
/* ---- Menú desplegable ---- */
.checkout-ciudad__menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background-color: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow);
overflow: hidden;
z-index: 20;
max-height: 280px;
overflow-y: auto;
animation: checkout-ciudad-fade-in 0.15s ease-out;
}
@keyframes checkout-ciudad-fade-in {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.checkout-ciudad__option {
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: 10px var(--space-4);
background: transparent;
border: none;
text-align: left;
color: var(--text-primary);
font-size: var(--text-base);
cursor: pointer;
transition: background-color var(--transition-fast);
font-family: var(--font-sans);
}
.checkout-ciudad__option:hover,
.checkout-ciudad__option.is-active {
background-color: var(--accent-soft);
color: var(--accent-700);
}
.checkout-ciudad__option-icon {
font-size: 14px;
color: var(--text-muted);
flex-shrink: 0;
}
.checkout-ciudad__option:hover .checkout-ciudad__option-icon,
.checkout-ciudad__option.is-active .checkout-ciudad__option-icon {
color: var(--accent);
}
/* ============================================================
CHECKOUT — SECCIONES (estructura base reusable)
Estilos compartidos por TODAS las secciones del checkout:
header con icono, label de grupo, contenedor de acciones.
============================================================ */
/* ---- Header de sección (icono + título + subtítulo) ---- */
.checkout-section__header {
display: flex;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-6);
text-align: left;
}
.checkout-section__icon {
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background-color: var(--primary-500);
color: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.checkout-section__title {
font-size: var(--text-lg);
font-weight: var(--font-semibold);
color: var(--text-primary);
margin: 0;
line-height: 1.2;
}
.checkout-section__subtitle {
font-size: var(--text-sm);
color: var(--text-secondary);
margin: var(--space-1) 0 0;
line-height: var(--leading-normal);
}
/* ---- Grupo dentro de la sección ---- */
.checkout-section__group {
margin-bottom: var(--space-6);
}
.checkout-section__label {
display: block;
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--text-secondary);
margin-bottom: var(--space-3);
}
/* ---- Acciones (botones) ---- */
.checkout-section__actions {
display: flex;
justify-content: flex-end;
gap: var(--space-3);
margin-top: var(--space-6);
padding-top: var(--space-5);
border-top: 1px solid var(--border);
}
/* ============================================================
CHECKOUT — TIPO DE FIRMA (cards Natural / Jurídica)
============================================================ */
.checkout-tipo-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-3);
}
.checkout-tipo {
position: relative;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4);
background-color: var(--bg-card);
border: 1.5px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
text-align: left;
font-family: var(--font-sans);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.checkout-tipo:hover:not(.is-selected) {
border-color: var(--accent);
}
.checkout-tipo.is-selected {
border-color: var(--primary-500);
box-shadow: 0 0 0 3px rgba(46, 83, 183, 0.10);
}
.checkout-tipo__icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background-color: var(--primary-500);
color: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.checkout-tipo__info {
flex: 1;
min-width: 0;
}
.checkout-tipo__title {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--text-primary);
line-height: 1.2;
}
.checkout-tipo__subtitle {
font-size: var(--text-xs);
color: var(--text-muted);
margin-top: 2px;
}
.checkout-tipo__check {
width: 24px;
height: 24px;
border-radius: var(--radius-full);
background-color: var(--primary-500);
color: var(--text-inverse);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
opacity: 0;
transform: scale(0.8);
transition: opacity var(--transition-fast), transform var(--transition-fast);
flex-shrink: 0;
}
.checkout-tipo.is-selected .checkout-tipo__check {
opacity: 1;
transform: scale(1);
}
.checkout-input-wrap {
position: relative;
}
.checkout-input-wrap .ds-input {
padding-right: 36px; /* espacio para el icono */
}
.checkout-input-wrap__icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
}
.is-valid-icon {
color: var(--success-500);
}
.is-invalid-icon {
color: var(--danger-500);
}
/* ---- Estados del input ---- */
.ds-input.is-valid {
border-color: var(--success-500);
}
.ds-input.is-valid:focus {
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.ds-input.is-invalid {
border-color: var(--danger-500);
background-color: rgba(220, 38, 38, 0.02);
}
.ds-input.is-invalid:focus {
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.checkout-toggle {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
background-color: var(--bg-subtle);
border: 1px solid var(--border);
border-radius: var(--radius-md);
cursor: pointer;
margin: var(--space-4) 0;
transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.checkout-toggle:hover {
border-color: var(--border-strong);
}
.checkout-toggle__input {
/* Lo ocultamos pero mantenemos accesible al teclado */
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.checkout-toggle__switch {
position: relative;
width: 38px;
height: 22px;
background-color: var(--neutral-300);
border-radius: var(--radius-full);
transition: background-color var(--transition-fast);
flex-shrink: 0;
}
.checkout-toggle__switch::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 18px;
height: 18px;
background-color: #ffffff;
border-radius: var(--radius-full);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: transform var(--transition-fast);
}
.checkout-toggle__input:checked + .checkout-toggle__switch {
background-color: var(--primary-500);
}
.checkout-toggle__input:checked + .checkout-toggle__switch::after {
transform: translateX(16px);
}
.checkout-toggle__input:focus-visible + .checkout-toggle__switch {
box-shadow: 0 0 0 3px rgba(46, 83, 183, 0.2);
}
.checkout-toggle__label {
font-size: var(--text-base);
color: var(--text-primary);
font-weight: var(--font-medium);
}
/* --- Modal (ModalTerminos, PasoEntrega: confirmar y reenviar) --- */
.checkout-modal__backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: var(--space-4);
}
.checkout-modal {
background: var(--bg-card);
border-radius: var(--radius-lg);
max-width: 640px;
width: 100%;
max-height: 85vh;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.checkout-modal__header,
.checkout-modal__footer {
padding: var(--space-4);
display: flex;
align-items: center;
flex-shrink: 0;
}
.checkout-modal__header {
justify-content: space-between;
border-bottom: 1px solid var(--border);
}
.checkout-modal__footer {
justify-content: flex-end;
gap: var(--space-2);
border-top: 1px solid var(--border);
}
.checkout-modal__title {
margin: 0;
font-size: var(--text-lg);
color: var(--text-primary);
}
.checkout-modal__close {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 1.25rem;
padding: var(--space-1);
line-height: 1;
}
.checkout-modal__close:hover {
color: var(--text-primary);
}
.checkout-modal__body {
padding: var(--space-4);
overflow-y: auto;
overflow-x: hidden;
flex: 1;
}
.checkout-tyc__contenido {
overflow-x: hidden;
min-width: 0;
}
.checkout-tyc__contenido,
.checkout-tyc__contenido * {
overflow-wrap: break-word !important;
word-break: normal !important;
min-width: 0 !important;
max-width: 100% !important;
width: auto !important;
white-space: normal !important;
}
/* ===================================================================
Carga de firma .p12 (firma propia) — acorde al sistema de diseño.
La zona completa es clickeable; el real va invisible encima.
=================================================================== */
.sus-p12-drop {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 104px;
padding: var(--space-4);
background-color: var(--bg-card);
border: 1.5px dashed var(--border-strong);
border-radius: var(--radius-lg);
cursor: pointer;
transition: border-color var(--transition-base),
background-color var(--transition-base),
box-shadow var(--transition-base);
}
.sus-p12-drop:hover {
border-color: var(--primary-500);
background-color: var(--bg-hover);
}
.sus-p12-drop:focus-within {
border-color: var(--border-focus);
box-shadow: 0 0 0 3px rgba(46, 83, 183, 0.12);
}
.sus-p12-drop.is-loaded {
border-style: solid;
border-color: var(--state-success-border);
background-color: var(--state-success-bg);
}
/* El input real cubre toda la zona pero es invisible: un clic en cualquier
parte abre el selector de archivos. */
.sus-p12-drop__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.sus-p12-drop__contenido {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
pointer-events: none;
text-align: center;
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--text-muted);
}
.sus-p12-drop__contenido i {
font-size: 28px;
color: var(--text-muted);
transition: color var(--transition-base);
}
.sus-p12-drop:hover .sus-p12-drop__contenido,
.sus-p12-drop:hover .sus-p12-drop__contenido i {
color: var(--primary-500);
}
.sus-p12-drop.is-loaded .sus-p12-drop__contenido,
.sus-p12-drop.is-loaded .sus-p12-drop__contenido i {
color: var(--state-success-text);
}
/* ===================================================================
Tabla de errores de la carga masiva de productos.
=================================================================== */
.fe-errores {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
}
.fe-errores__tabla {
width: 100%;
border-collapse: collapse;
font-family: var(--font-sans);
font-size: var(--text-sm);
}
.fe-errores__tabla thead th {
text-align: left;
padding: var(--space-3) var(--space-4);
background-color: var(--bg-subtle);
color: var(--text-primary);
font-weight: var(--font-semibold);
border-bottom: 1px solid var(--border);
}
.fe-errores__tabla tbody td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border);
color: var(--text-primary);
vertical-align: top;
}
.fe-errores__tabla tbody tr:last-child td {
border-bottom: none;
}
.fe-errores__tabla tbody tr:hover td {
background-color: var(--bg-hover);
}
/* ===================================================================
Landing · Facturar en 3 pasos (plan con firma incluida)
=================================================================== */
.landing-pasos {
padding: var(--space-16) 0;
background-color: var(--bg-page);
}
.landing-pasos__inner {
max-width: 1080px;
margin: 0 auto;
padding: 0 var(--space-4);
text-align: center;
}
.landing-pasos__header {
max-width: 640px;
margin: 0 auto var(--space-12);
}
.landing-pasos__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 6px var(--space-3);
border-radius: var(--radius-full);
background-color: var(--accent-soft);
color: var(--accent-600);
font-size: var(--text-sm);
font-weight: var(--font-semibold);
margin-bottom: var(--space-4);
}
.landing-pasos__title {
font-size: clamp(1.6rem, 4vw, 2.4rem);
font-weight: var(--font-bold);
color: var(--text-primary);
line-height: 1.15;
margin-bottom: var(--space-3);
}
.landing-pasos__subtitle {
color: var(--text-secondary);
font-size: var(--text-base);
line-height: 1.55;
}
.landing-pasos__steps {
display: flex;
align-items: stretch;
justify-content: center;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-8);
}
.landing-pasos__step {
position: relative;
flex: 1 1 200px;
max-width: 240px;
background-color: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: var(--space-8) var(--space-4) var(--space-5);
box-shadow: var(--shadow);
text-align: center;
}
.landing-pasos__step-num {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background-color: var(--primary-500);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-bold);
font-size: var(--text-sm);
box-shadow: 0 4px 10px rgba(46, 83, 183, 0.35);
}
.landing-pasos__step-icon {
width: 56px;
height: 56px;
margin: var(--space-2) auto var(--space-3);
border-radius: var(--radius-lg);
background-color: var(--primary-600);
color: var(--primary-50);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.landing-pasos__step-title {
font-weight: var(--font-semibold);
color: var(--text-primary);
margin-bottom: 4px;
}
.landing-pasos__step-desc {
font-size: var(--text-sm);
color: var(--text-muted);
line-height: 1.4;
}
.landing-pasos__arrow {
display: flex;
align-items: center;
color: var(--text-muted);
font-size: 20px;
flex: 0 0 auto;
}
.landing-pasos__step--done {
border-color: var(--success-500);
background: linear-gradient(180deg, var(--state-success-bg) 0%, var(--bg-card) 60%);
}
.landing-pasos__step--done .landing-pasos__step-num {
background-color: var(--success-500);
box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
}
.landing-pasos__step--done .landing-pasos__step-icon {
background-color: var(--success-600);
color: var(--primary-50);
}
.landing-pasos__arrow--done {
color: var(--success-500);
}
.landing-pasos__note {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-lg);
background-color: var(--bg-subtle);
color: var(--text-secondary);
font-size: var(--text-sm);
margin-bottom: var(--space-8);
text-align: left;
}
.landing-pasos__cta-wrap {
display: flex;
justify-content: center;
}
@media (max-width: 720px) {
.landing-pasos__arrow {
transform: rotate(90deg);
}
.landing-pasos__step {
max-width: 320px;
}
}
/* ===================================================================
Swap de imagen por tema (logo claro / logo blanco en modo oscuro)
=================================================================== */
.ds-theme-img--dark { display: none; }
html[data-theme="dark"] .ds-theme-img--light { display: none; }
html[data-theme="dark"] .ds-theme-img--dark { display: inline-block; }
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .ds-theme-img--light { display: none; }
html:not([data-theme="light"]) .ds-theme-img--dark { display: inline-block; }
}
/* Imagen real en la tarjeta de casos (reemplaza el mockup pastel). */
.landing-paraque__case-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Íconos uniformes (pasos): fondo principal, ícono del color del fondo. */
.landing-pasos__step-icon {
background-color: var(--primary-500);
color: var(--bg-card);
}