/* =============================================================================
   ID Services · Base y componentes compartidos
   Los mismos componentes en landings y panel. Ver docs/04-DESIGN-SYSTEM.md §4.
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--text);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); letter-spacing: -0.01em; }

p { text-wrap: pretty; }

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

ul, ol { padding-left: 1.25rem; }

/* Foco visible SIEMPRE. Quitarlo rompe la navegación por teclado. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

::selection { background: var(--accent-soft); color: var(--accent-strong); }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Salto al contenido: aparece solo al tabular. */
.skip-link {
    position: absolute; left: -9999px; top: var(--space-2);
    background: var(--accent); color: var(--accent-contrast);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm); z-index: 100;
}
.skip-link:focus { left: var(--space-4); }

/* =============================================================================
   Layout
   ============================================================================= */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.container--sm { max-width: var(--container-sm); }

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }

.row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Exactamente dos columnas, no "las que quepan".
   `auto-fit` está bien para tarjetas homogéneas, pero con CUATRO elementos
   mete tres arriba y deja uno solo abajo, que se lee como un error. Con dos
   fijas, cuatro apps caen en dos filas parejas. */
.grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 720px) {
    .grid--pair { grid-template-columns: 1fr; }
}

/* Selector de apps (landing y panel): con un número de apps que no es
   múltiplo parejo de la columna —hoy 5— una grilla fija deja la última fila
   pegada a la izquierda, que se lee como un error de layout. Flex con
   `justify-content:center` no tiene ese problema: la fila que sobra —sean 1 o
   2 tarjetas— se centra sola, sin tener que fijar "3 arriba, 2 abajo" a mano
   ni recalcular cada vez que se agregue o quite una app.

   El ancho de cada tarjeta es una FRACCIÓN EXACTA del contenedor —no un
   mínimo con `flex-grow`— a propósito: con un mínimo, una pantalla ancha de
   escritorio mete 4 en la primera fila y dejaba 1 sola abajo, que es
   exactamente el error que esto existe para evitar. Con la fracción exacta,
   nunca entra una cuarta tarjeta aunque sobre espacio. */
.grid--apps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
}
.grid--apps > * {
    flex: 0 1 calc((100% - 2 * var(--space-6)) / 3);
    min-width: 260px;
}

@media (max-width: 900px) {
    .grid--apps > * { flex-basis: calc((100% - var(--space-6)) / 2); }
}

@media (max-width: 560px) {
    .grid--apps > * { flex-basis: 100%; }
}

.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* =============================================================================
   Tipografía auxiliar
   ============================================================================= */

.kicker {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.lead { font-size: var(--text-lg); color: var(--text-muted); }
.muted { color: var(--text-muted); }
.soft { color: var(--text-soft); }
.small { font-size: var(--text-sm); }
.tiny { font-size: var(--text-xs); }
.strong { font-weight: 600; }
.center { text-align: center; }
.mono { font-family: var(--font-mono); font-size: .875em; }

/* Números que no bailan al actualizarse. */
.tabular { font-variant-numeric: tabular-nums; }

/* =============================================================================
   Botones
   ============================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    padding: 0 var(--space-5, 1.25rem);
    height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition), border-color var(--transition),
                transform var(--transition), box-shadow var(--transition);
}

.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary {
    background: var(--accent);
    color: var(--accent-contrast);
}
.btn--primary:hover { background: var(--accent-strong); }

.btn--secondary {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--text);
}
.btn--secondary:hover { border-color: var(--accent); color: var(--accent-strong); }

.btn--ghost { background: transparent; color: var(--text-muted); }
.btn--ghost:hover { background: var(--surface-2); color: var(--text); }

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

.btn--lg { height: 52px; font-size: var(--text-base); padding-inline: var(--space-8); }
.btn--sm { height: 36px; font-size: var(--text-xs); padding-inline: var(--space-3); }
.btn--block { width: 100%; }

.btn[disabled], .btn--disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* =============================================================================
   Tarjetas
   ============================================================================= */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
}

.card--flush { padding: 0; overflow: hidden; }
.card--soft { background: var(--surface-2); box-shadow: none; }

a.card, .card--link {
    display: block;
    color: inherit;
    transition: transform var(--transition), box-shadow var(--transition),
                border-color var(--transition);
}
a.card:hover, .card--link:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--accent);
}

.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--border);
}

.card__title { font-size: var(--text-base); font-weight: 600; }
.card__body { padding: var(--space-6); }

/* Nota al pie de una tarjeta: el porqué de lo que se acaba de ver, sin
   competir con el contenido. Va después de una tabla, no antes. */
.card__footer {
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border);
    background: var(--surface-2);
}

/* =============================================================================
   Insignias y estados
   ============================================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--text-muted);
    white-space: nowrap;
}

.badge--accent  { background: var(--accent-soft);  color: var(--accent-strong); }
.badge--success { background: var(--success-soft); color: var(--success); }
.badge--warning { background: var(--warning-soft); color: var(--warning); }
.badge--danger  { background: var(--danger-soft);  color: var(--danger); }
.badge--info    { background: var(--info-soft);    color: var(--info); }

/* El color nunca es el único portador de información: todo estado lleva texto
   (docs/04-DESIGN-SYSTEM.md §7). El punto es refuerzo, no el mensaje. */
.badge__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* =============================================================================
   Avatar
   ============================================================================= */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 700;
    font-size: var(--text-sm);
    flex-shrink: 0;
    overflow: hidden;
}

.avatar--sm { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar--lg { width: 64px; height: 64px; font-size: var(--text-lg); }

/* =============================================================================
   Formularios
   ============================================================================= */

.field { display: block; margin-bottom: var(--space-4); }

.field__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: var(--text);
}

.field__hint {
    display: block;
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-2);
}

.field__error {
    display: block;
    font-size: var(--text-xs);
    color: var(--danger);
    margin-top: var(--space-2);
    font-weight: 500;
}

.input, .select, .textarea {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.textarea { height: auto; min-height: 120px; padding: var(--space-3) var(--space-4); resize: vertical; }

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}

.input::placeholder, .textarea::placeholder { color: var(--text-soft); }
.input[aria-invalid="true"] { border-color: var(--danger); }

.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-right: var(--space-8);
}

.checkbox { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }

/* =============================================================================
   Avisos
   ============================================================================= */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: var(--text-sm);
    line-height: 1.5;
}

.alert--success { background: var(--success-soft); border-color: var(--success); color: #12602f; }
.alert--warning { background: var(--warning-soft); border-color: var(--warning); color: #8a4b00; }
.alert--error   { background: var(--danger-soft);  border-color: var(--danger);  color: #a01919; }
.alert--info    { background: var(--info-soft);    border-color: var(--info);    color: #17439c; }

[data-theme="dark"] .alert--success,
[data-theme="dark"] .alert--warning,
[data-theme="dark"] .alert--error,
[data-theme="dark"] .alert--info { color: var(--text); }

/* =============================================================================
   Estado vacío — nunca un texto solo (docs/04-DESIGN-SYSTEM.md §4)
   ============================================================================= */

.empty {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--text-muted);
}

.empty__icon {
    width: 56px; height: 56px;
    margin: 0 auto var(--space-4);
    display: grid; place-items: center;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-soft);
}

.empty__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--text);
    margin-bottom: var(--space-2);
}

/* =============================================================================
   Tablas
   ============================================================================= */

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.table th {
    text-align: left;
    font-weight: 600;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table td {
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }

/* =============================================================================
   Marca
   ============================================================================= */

.brandmark {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

.brandmark:hover { text-decoration: none; }

.brandmark__glyph {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: -0.03em;
    flex-shrink: 0;
}

/* Insignia con el logo oficial en vez del glifo genérico.
   Fondo blanco fijo, no --surface: el emblema trae líneas negras (el
   estetoscopio de My Nurse, el escudo de Mechanical FIX) que se pierden
   sobre un fondo oscuro. El chip blanco garantiza legibilidad sin
   importar el tema, igual que un ícono de app en la tienda. */
.brandmark__glyph--logo {
    background: #FFFFFF;
    border: 1px solid var(--border);
    padding: 5px;
}

.brandmark__glyph--logo img { width: 100%; height: 100%; object-fit: contain; }

/* Sello de pertenencia. Es el ÚNICO elemento con color fijo en las cinco
   marcas: índigo de ID Services, pase lo que pase con el acento local. */
.ecosystem-seal {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: #4F6BED;
}

.ecosystem-seal::before {
    content: '';
    width: 8px; height: 8px;
    background: #4F6BED;
    transform: rotate(45deg);
    border-radius: 2px;
}

/* =============================================================================
   Utilidades
   ============================================================================= */

.divider { height: 1px; background: var(--border); border: 0; margin: var(--space-6) 0; }
.hide { display: none !important; }

@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    :root { --text-display: 2rem; --text-h1: 1.625rem; --text-h2: 1.25rem; }
    .container { padding-inline: var(--space-4); }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}