/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* =========================================================
   ORDEN DE CAPAS
   ========================================================= */
@layer reset, variables, base, layout, components, responsive;

/* =========================================================
   RESET
   ========================================================= */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  img { max-width: 100%; display: block; }
}

/* =========================================================
   VARIABLES
   ========================================================= */
@layer variables {
  :root {
    /* ---------- Tipografía ---------- */
    --main-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
                 "Helvetica Neue", sans-serif;
    --color-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* ---------- Base ---------- */
    --color-bg: #f7fafc;
    --color-surface: #ffffff;
    --color-border: #e2e8f0;
    --color-border-soft: #edf2f7;
    --color-border-dark: #2d3748;
    --color-input-border: #cbd5e0;
    --color-row-hover: #f7fafc;

    /* ---------- Texto ---------- */
    --color-text: #2d3748;
    --color-text-strong: #1a202c;
    --color-text-muted: #718096;
    --color-text-subtle: #a0aec0;
    --color-code: #4a5568;

    /* ---------- Primario ---------- */
    --color-primary: #3182ce;
    --color-primary-dark: #2b6cb0;
    --color-primary-light: #4299e1;
    --color-primary-soft: #ebf8ff;
    --color-primary-border: #bee3f8;

    /* ---------- Éxito / verde ---------- */
    --color-success: #38a169;
    --color-success-dark: #276749;
    --color-success-strong: #1c4532;
    --color-success-soft: #c6f6d5;

    /* ---------- Advertencia / naranja ---------- */
    --color-warning: #dd6b20;
    --color-warning-dark: #c05621;
    --color-warning-soft: #feebc8;

    /* ---------- Peligro / rojo ---------- */
    --color-danger: #e53e3e;
    --color-danger-dark: #c53030;
    --color-danger-strong: #9b2c2c;
    --color-danger-soft: #fff5f5;
    --color-danger-bg: #fed7d7;
    --color-danger-soft-bg: #fee2e2;
    --color-danger-soft-fg: #991b1b;

    /* ---------- Teal ---------- */
    --color-teal: #319795;
    --color-teal-dark: #234e52;
    --color-teal-soft: #e6fffa;

    /* ---------- Morado ---------- */
    --color-purple: #805ad5;
    --color-purple-dark: #44337a;
    --color-purple-soft: #faf5ff;

    /* ---------- Neutro (badge muted) ---------- */
    --color-muted-bg: #e2e8f0;

    /* ---------- Alias semánticos (mantienen compatibilidad) ---------- */
    --color-green: #38a169;
    --color-green-dark: #1c4532;
    --color-green-soft: #f0fff4;
    --color-orange: #dd6b20;
    --color-orange-dark: #7b341e;
    --color-orange-soft: #fffaf0;

    /* ---------- Footer ---------- */
    --color-footer-bg: #1a202c;
    --color-footer-text: #a0aec0;

    /* ---------- Radios ---------- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* ---------- Sombras ---------- */
    --shadow-sm: 0 2px 4px rgba(49, 130, 206, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* ---------- Layout ---------- */
    --container: 1200px;
  }
}

/* =========================================================
   BASE
   ========================================================= */
@layer base {
  html, body, input, button, select, textarea {
    font-family: var(--main-font);
  }
  body {
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
}

/* =========================================================
   LAYOUT
   ========================================================= */
@layer layout {

  /* ---------- NAVBAR ---------- */
  .navbar {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .navbar__inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 20px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .navbar__logo {
    width: 120px;
    height: 50px;
    display: flex;
    align-items: center;
    overflow: hidden;
    flex-shrink: 0;
  }
  .navbar__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  .navbar__menu {
    display: flex;
    align-items: center;
    gap: 24px;
  }
  .navbar__link {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    transition: color 0.2s;
  }
  .navbar__link:hover { color: var(--color-primary); }

  .public-navbar__brand {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  .public-navbar__brand img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  .public-navbar__link--active {
    color: var(--color-primary);
    font-weight: 700;
  }
  .public-navbar__cta { white-space: nowrap; }
  .public-main { overflow: hidden; }

  /* ---------- HERO ---------- */
  .hero {
    padding: 80px 20px;
    background: linear-gradient(135deg, #ffffff 0%, #edf2f7 100%);
    border-bottom: 1px solid var(--color-border);
  }
  .hero__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
  }
  .hero__content { flex: 1; min-width: 320px; }
  .hero__media   { flex: 1; min-width: 320px; }

  /* ---------- ABOUT ---------- */
  .about {
    padding: 90px 20px;
    background: var(--color-surface);
  }
  .about__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
  }
  .about__media,
  .about__content { flex: 1; min-width: 320px; }

  /* ---------- MODULES ---------- */
  .modules {
    padding: 90px 20px;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
  }
  .modules__inner { max-width: var(--container); margin: 0 auto; }
  .modules__header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
  }
  .modules__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
  }
  .modules__actions {
    margin-top: 30px;
    text-align: center;
  }

  /* ---------- FOOTER ---------- */
  .footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 50px 20px 30px;
    border-top: 1px solid var(--color-border-dark);
  }
  .footer__inner {
    max-width: var(--container);
    margin: 0 auto 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
  }
  .footer__bottom {
    max-width: var(--container);
    margin: 0 auto;
    border-top: 1px solid var(--color-border-dark);
    padding-top: 20px;
    text-align: center;
    font-size: 13px;
  }
}

/* =========================================================
   COMPONENTS
   ========================================================= */
@layer components {

  /* =========================================================
     1. BOTONES
     ========================================================= */
  .btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  }
  .btn:hover { transform: translateY(-1px); }

  .btn--lg { padding: 14px 28px; font-size: 16px; }
  .btn--sm { padding: 6px 10px; font-size: 12px; border-radius: var(--radius-sm); }

  .btn--primary {
    background: var(--color-primary);
    color: #ffffff;
    box-shadow: var(--shadow-sm);
  }
  .btn--primary:hover { background: var(--color-primary-dark); }

  .btn--dark {
    background: var(--color-primary-dark);
    color: #ffffff;
    box-shadow: var(--shadow-md);
  }
  .btn--dark:hover { background: var(--color-primary); }

  .btn--success {
    background: var(--color-success);
    color: #ffffff;
  }
  .btn--success:hover { background: var(--color-success-dark); }

  .btn--danger {
    background: var(--color-danger);
    color: #ffffff;
  }
  .btn--danger:hover { background: var(--color-danger-dark); }

  .btn--ghost {
    background: var(--color-surface);
    color: var(--color-code);
    border: 1px solid var(--color-input-border);
  }
  .btn--ghost:hover { background: var(--color-bg); }

  .btn--subtle {
    background: var(--color-border-soft);
    color: var(--color-text);
    box-shadow: none;
  }
  .btn--subtle:hover { background: var(--color-border); }

  /* ---------- Aliases legacy (compatibilidad con vistas actuales) ---------- */
  .navbar__cta {
    display: inline-block;
    background: var(--color-primary);
    color: #ffffff;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
  }
  .navbar__cta:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
  }
  .btn-primary {
    display: inline-block;
    background: var(--color-primary-dark);
    color: #ffffff;
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    box-shadow: var(--shadow-md);
    transition: background 0.2s, transform 0.2s;
  }
  .btn-primary:hover { background: var(--color-primary); }
  .btn-secondary {
    display: inline-block;
    background: var(--color-surface);
    color: var(--color-code);
    border: 1px solid var(--color-input-border);
    padding: 14px 28px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: background 0.2s;
  }
  .btn-secondary:hover { background: var(--color-bg); }

  /* =========================================================
     2. BADGES
     ========================================================= */
  .badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
  }
  .badge--blue    { background: var(--color-primary-soft); color: var(--color-primary-dark); }
  .badge--purple  { background: var(--color-purple-soft);  color: var(--color-purple-dark); }
  .badge--success { background: var(--color-success-soft); color: var(--color-success-strong); }
  .badge--warning { background: var(--color-warning-soft); color: var(--color-warning-dark); }
  .badge--danger  { background: var(--color-danger-bg);    color: var(--color-danger-strong); }
  .badge--muted   { background: var(--color-muted-bg);     color: var(--color-text-subtle); }

  /* =========================================================
     3. FORMULARIOS
     ========================================================= */
  .form-group    { margin-bottom: 15px; }
  .form-group--lg { margin-bottom: 30px; }
  .form-group--last { margin-bottom: 20px; }

  .form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 700;
    color: var(--color-code);
    font-size: 14px;
  }

  .form-input,
  .form-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font-family: inherit;
    font-size: 14px;
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .form-input:focus,
  .form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
  }

  .form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 36px;
  }

  .form-submit {
    width: 100%;
    background: var(--color-primary);
    color: #ffffff;
    padding: 10px;
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
  }
  .form-submit:hover { background: var(--color-primary-dark); }

  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid var(--color-border);
    padding-top: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
  }

  .form-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
  }
  .form-header__title {
    color: var(--color-text-strong);
    font-size: 22px;
    font-weight: 800;
    margin: 0;
  }
  .form-header__subtitle {
    color: var(--color-text-muted);
    margin: 6px 0 0;
    font-size: 14px;
  }

  /* ---------- Alertas / errores ---------- */
  .form-alert {
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    margin-bottom: 16px;
  }
  .form-alert--danger {
    background: var(--color-danger-soft);
    color: var(--color-danger-dark);
    border: 1px solid var(--color-danger-bg);
  }
  .form-alert__title {
    font-size: 14px;
    margin: 0 0 5px;
    font-weight: 700;
  }
  .form-alert__list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
  }

  /* =========================================================
     4. AUTENTICACIÓN
     ========================================================= */
  .auth-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - 70px);
    padding: 80px 20px;
    background: var(--color-bg);
  }
  .auth-card {
    width: 100%;
    max-width: 400px;
    padding: 30px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  }
  .auth-card__title {
    margin: 0 0 24px;
    color: var(--color-text);
    font-size: 22px;
    font-weight: 800;
    text-align: center;
  }

  /* =========================================================
     5. PÁGINA GENÉRICA (listados + dashboard)
     ========================================================= */
  .page {
    padding: 40px 20px;
    max-width: 1100px;
    margin: 0 auto;
  }
  .page--wide   { max-width: var(--container); }
  .page--narrow { max-width: 600px; }

  .page__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
  }
  .page__header--bordered {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
  }
  .page__title {
    color: var(--color-text-strong);
    font-size: 26px;
    font-weight: 800;
    margin: 0;
  }
  .page__subtitle {
    color: var(--color-text-muted);
    margin: 6px 0 0;
    font-size: 14px;
  }
  .page__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  .page__back {
    display: inline-block;
    margin-top: 20px;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 14px;
  }
  .page__back:hover { color: var(--color-primary); }

  /* =========================================================
     6. MÉTRICAS (stats)
     ========================================================= */
  .stats-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    flex-wrap: wrap;
  }
  .stat {
    flex: 1;
    min-width: 160px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 15px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  }
  .stat__label {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .stat__value {
    margin: 5px 0 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--color-text);
  }
  .stat--success .stat__label,
  .stat--success .stat__value { color: var(--color-success-dark); }
  .stat--warning .stat__label,
  .stat--warning .stat__value { color: var(--color-warning); }
  .stat--danger  .stat__label,
  .stat--danger  .stat__value { color: var(--color-danger-dark); }

  /* =========================================================
     7. TABLAS
     ========================================================= */
  .table-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
  .table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .data-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14px;
  }
  .data-table thead tr {
    border-bottom: 2px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    background-color: var(--color-bg);
  }
  .data-table th { padding: 14px 20px; font-weight: 700; }
  .data-table td {
    padding: 14px 20px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-soft);
  }
  .data-table tbody tr:hover { background-color: var(--color-row-hover); }

  .data-table__th--right,
  .data-table__td--right  { text-align: right; }
  .data-table__th--center,
  .data-table__td--center { text-align: center; }
  .data-table__td--muted  { color: var(--color-text-muted); font-size: 13px; }
  .data-table__td--code   { font-family: var(--color-mono); font-size: 13px; color: var(--color-code); }
  .data-table__td--strong { font-weight: 700; color: var(--color-primary-dark); }
  .data-table__empty      { padding: 30px; text-align: center; color: var(--color-text-subtle); }

  .data-table__name  { display: block; color: var(--color-text-strong); font-weight: 700; }
  .data-table__plate { display: block; font-weight: 700; color: var(--color-primary-dark); font-size: 15px; }
  .data-table__meta  { display: block; font-size: 12px; color: var(--color-text-muted); }

  .data-table__policy { color: var(--color-text); font-weight: 500; font-size: 13px; }
  .data-table__policy-date { font-size: 11px; color: var(--color-text-muted); }
  .data-table__policy-date--expired { color: var(--color-danger-dark); font-weight: 700; }

  .data-table__actions {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
  }

  .data-table__product-link {
    color: var(--color-primary-dark);
    text-decoration: none;
    font-weight: 700;
  }
  .data-table__product-link:hover { text-decoration: underline; }

  /* ---------- Enlaces de acción ---------- */
  .action-link {
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
  }
  .action-link:hover { text-decoration: underline; }
  .action-link--view   { color: var(--color-primary); margin-right: 10px; }
  .action-link--edit   { color: var(--color-code); }
  .action-link--delete { color: var(--color-danger); margin-left: 10px; }
  /* Utilitarios de color de texto */
  .text-success { color: var(--color-success-dark); font-weight: 700; }
  .text-danger  { color: var(--color-danger-dark);  font-weight: 700; }

  /* =========================================================
     8. ANEXOS (emojis de documentos)
     ========================================================= */
  .attachments {
    display: flex;
    justify-content: center;
    gap: 8px;
  }
  .attachment-link {
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.15s;
  }
  .attachment-link:hover { transform: scale(1.2); }
  .attachments__empty {
    color: var(--color-text-subtle);
    font-size: 12px;
  }

  /* =========================================================
     9. DASHBOARD
     ========================================================= */
  .dashboard__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
  }

  .dashboard-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .dashboard-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
                0 4px 6px -2px rgba(0, 0, 0, 0.03);
  }

  .dashboard-card--blue   { border-top-color: var(--color-primary); }
  .dashboard-card--teal   { border-top-color: var(--color-teal); }
  .dashboard-card--green  { border-top-color: var(--color-green); }
  .dashboard-card--purple { border-top-color: var(--color-purple); }
  .dashboard-card--orange { border-top-color: var(--color-orange); }

  .dashboard-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
  }
  .dashboard-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
  }
  .dashboard-card__badge {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  .dashboard-card__badge--blue   { background: var(--color-primary-soft); color: var(--color-primary-dark); }
  .dashboard-card__badge--teal   { background: var(--color-teal-soft);    color: var(--color-teal-dark); }
  .dashboard-card__badge--green  { background: var(--color-green-soft);   color: var(--color-green-dark); }
  .dashboard-card__badge--purple { background: var(--color-purple-soft);  color: var(--color-purple-dark); }
  .dashboard-card__badge--orange { background: var(--color-orange-soft);  color: var(--color-orange-dark); }

  .dashboard-card__value {
    font-size: 32px;
    font-weight: 800;
    margin: 10px 0 4px;
    color: var(--color-text-strong);
  }
  .dashboard-card__caption {
    color: var(--color-text-muted);
    font-size: 13px;
    margin: 0;
  }

  .dashboard-card__balances {
    display: flex;
    gap: 10px;
    margin: 12px 0 8px;
  }
  .dashboard-card__balance {
    flex: 1;
    background: var(--color-bg);
    padding: 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
  }
  .dashboard-card__balance-label {
    font-size: 11px;
    color: var(--color-text-muted);
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
  }
  .dashboard-card__balance-value {
    font-size: 15px;
    color: var(--color-text);
  }
  .dashboard-card__balance-value--usd { color: var(--color-success-dark); }

  .dashboard-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
  }
  .dashboard-card__link:hover { text-decoration: underline; }
  .dashboard-card__link--blue   { color: var(--color-primary); }
  .dashboard-card__link--teal   { color: var(--color-teal); }
  .dashboard-card__link--green  { color: var(--color-green); }
  .dashboard-card__link--purple { color: var(--color-purple); }
  .dashboard-card__link--orange { color: var(--color-orange); }

  /* =========================================================
     10. HERO / ABOUT / MODULES / FOOTER (contenido)
     ========================================================= */
  .hero__badge {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
  }
  .hero__title {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--color-text-strong);
    margin: 15px 0 20px;
  }
  .hero__text {
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 30px;
  }
  .hero__actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
  }
  .hero__img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
  }

  .about__img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }
  .about__title {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text);
    margin-bottom: 20px;
  }
  .about__text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    margin-bottom: 15px;
  }
  .about__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
  }
  .about__stat {
    border-left: 3px solid var(--color-primary);
    padding-left: 15px;
  }
  .about__stat-value {
    margin: 0;
    font-size: 20px;
    color: var(--color-primary-dark);
  }
  .about__stat-label {
    margin: 5px 0 0;
    font-size: 14px;
    color: var(--color-text-muted);
  }
  .about__actions { margin-top: 24px; }

  .modules__title {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text-strong);
    margin: 0;
  }
  .modules__subtitle {
    font-size: 16px;
    color: var(--color-text-muted);
    margin-top: 10px;
  }
  .module-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .module-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
  }
  .module-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .module-card__icon--blue   { background: var(--color-primary-soft); color: var(--color-primary); }
  .module-card__icon--orange { background: var(--color-warning-soft); color: var(--color-orange); }
  .module-card__icon--teal   { background: var(--color-teal-soft);    color: var(--color-teal); }
  .module-card__icon--gray   { background: var(--color-border);      color: var(--color-code); }

  .module-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 10px;
  }
  .module-card__text {
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
  }

  .footer__brand {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
  }
  .footer__brand span { color: var(--color-primary-light); }
  .footer__tagline {
    font-size: 14px;
    margin-top: 10px;
    max-width: 300px;
    line-height: 1.5;
  }
  .footer__heading {
    color: #ffffff;
    margin: 0 0 15px;
    font-size: 16px;
    font-weight: 700;
  }
  .footer__contact {
    font-size: 14px;
    margin: 0;
    line-height: 1.8;
  }
  .footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 2;
  }
  .footer__list a {
    color: var(--color-input-border);
    text-decoration: none;
  }
  .footer__list a:hover { color: #ffffff; }

  /* =========================================================
     11. TABS / SETTINGS
     ========================================================= */
  .tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-border-soft);
    padding-bottom: 10px;
    flex-wrap: wrap;
  }
  .tab-link {
    padding: 8px 16px;
    border: none;
    background: var(--color-border-soft);
    color: var(--color-code);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    font-family: inherit;
    transition: background 0.2s, color 0.2s;
  }
  .tab-link:hover { background: var(--color-border); }
  .tab-link.is-active {
    background: var(--color-primary);
    color: #ffffff;
  }

  .tab-content {
    display: none;
    gap: 20px;
    flex-wrap: wrap;
  }
  .tab-content.is-active { display: flex; }

  .settings-card {
    flex: 1;
    min-width: 320px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 20px;
  }
  .settings-card--teal   { border-top: 4px solid var(--color-teal); }
  .settings-card--orange { border-top: 4px solid var(--color-orange); }
  .settings-card--projects {
    flex-basis: 100%;
    border-top: 4px solid var(--color-primary);
  }
  .settings-card__subtitle {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 12px;
  }
  .settings-card__count {
    color: var(--color-text-subtle);
    font-size: 12px;
    white-space: nowrap;
  }
  .settings-card__header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .settings-projects__list {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
  }

  .settings-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border-soft);
    gap: 10px;
  }
  .settings-card__title {
    font-size: 16px;
    margin: 0;
    color: var(--color-text);
    font-weight: 700;
  }
  .settings-card__cta {
    padding: 5px 10px;
    background-color: var(--color-primary);
    color: #ffffff;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.2s;
  }
  .settings-card__cta:hover { background: var(--color-primary-dark); }
  .settings-card__cta--teal   { background: var(--color-teal); }
  .settings-card__cta--teal:hover   { background: var(--color-teal-dark); }
  .settings-card__cta--orange { background: var(--color-orange); }
  .settings-card__cta--orange:hover { background: var(--color-orange-dark); }

  .settings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .settings-table thead tr {
    text-align: left;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 11px;
    text-transform: uppercase;
  }
  .settings-table th { padding: 8px 0; font-weight: 700; }
  .settings-table th.is-right { text-align: right; }

  .settings-table td {
    padding: 10px 0;
    border-bottom: 1px solid var(--color-bg);
    color: var(--color-text);
    vertical-align: middle;
  }
  .settings-table tbody tr:last-child td { border-bottom: none; }
  .settings-table__name { font-weight: 700; color: var(--color-text); }
  .settings-table__meta { color: var(--color-text-muted); }

  .settings-table__actions {
    text-align: right;
    white-space: nowrap;
  }
  .settings-table__actions > * { display: inline-block; vertical-align: middle; }
  .settings-table__actions > * + * { margin-left: 8px; }

  .btn-inline-danger {
    background: var(--color-danger-soft-bg);
    color: var(--color-danger-soft-fg);
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
  }
  .btn-inline-danger:hover { background: var(--color-danger-bg); }

  .link-inline {
    color: var(--color-primary);
    font-size: 12px;
    text-decoration: none;
    font-weight: 600;
  }
  .link-inline:hover { text-decoration: underline; }

    /* =========================================================
     LAYOUT DE FORMULARIO (grid de campos)
     ========================================================= */
  .form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 18px;
    flex-wrap: wrap;
  }
  .form-row--last { margin-bottom: 25px; }

  .form-col     { flex: 1; min-width: 200px; }
  .form-col--2  { flex: 2; }
  .form-col--1  { flex: 1; }

  /* Bloque destacado dentro del formulario (agrupación visual) */
  .form-section {
    background-color: var(--color-bg);
    padding: 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-soft);
  }

  /* Variantes de label */
  .form-label--required::after {
    content: " *";
    color: var(--color-danger);
    font-weight: 700;
  }
  .form-label--accent { color: var(--color-primary-dark); }

  /* Input / textarea deshabilitado o readonly */
  .form-input:disabled,
  .form-input[readonly] {
    background-color: var(--color-border-soft);
    color: var(--color-text-muted);
    cursor: not-allowed;
  }

  /* Textarea: solo cambia el resize */
  .form-textarea {
    resize: vertical;
    min-height: 80px;
  }
    /* =========================================================
     TARJETA DE FORMULARIO (wrapper de forms en new/edit)
     ========================================================= */
  .form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 30px;
  }
  /* =========================================================
     SHOW (ficha de detalle)
     ========================================================= */
  /* Card principal: identidad del registro */
  .show-hero {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    padding: 25px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
  }
  .show-hero__main { flex: 1; min-width: 260px; }
  .show-hero__tags {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .show-hero__title {
    color: var(--color-text-strong);
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 8px;
  }
  .show-hero__desc {
    color: var(--color-code);
    font-size: 14px;
    margin: 0;
  }

  /* Bloque de stock destacado (a la derecha del hero) */
  .show-stock {
    background: var(--color-bg);
    padding: 15px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-soft);
    min-width: 160px;
    text-align: right;
  }
  .show-stock__label {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-text-muted);
    display: block;
  }
  .show-stock__value {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-text);
    display: block;
  }
  .show-stock__value--low { color: var(--color-danger); }
  .show-stock__hint {
    font-size: 12px;
    color: var(--color-text-subtle);
    display: block;
    margin-top: 2px;
  }

  /* Grid de metadatos (3 cards) */
  .show-grid {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
  }
  .show-card {
    flex: 1;
    min-width: 260px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  }
  .show-card__title {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    margin: 0 0 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .show-card__field { margin-bottom: 8px; }
  .show-card__field:last-child { margin-bottom: 0; }
  .show-card__label {
    font-size: 12px;
    color: var(--color-text-muted);
    display: block;
  }
  .show-card__value {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
    display: block;
  }
  .show-card__value--lg { font-size: 16px; }
  .show-card__value--muted { color: var(--color-text-muted); font-weight: 700; }
  .show-card__value--accent { color: var(--color-primary-dark); font-weight: 700; }

  /* Layout horizontal dentro de una card (p.ej. precios) */
  .show-card__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
  }

  /* =========================================================
     HISTORIAL DE MOVIMIENTOS (sección colapsable con tabla)
     ========================================================= */
  .show-history {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
  .show-history__header {
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg);
    gap: 12px;
    flex-wrap: wrap;
  }
  .show-history__title {
    font-size: 18px;
    margin: 0;
    color: var(--color-text);
    font-weight: 700;
  }
  .show-history__count {
    font-size: 13px;
    color: var(--color-text-muted);
  }
  .show-history__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* =========================================================
     SECCIONES DE FORMULARIO (agrupación temática)
     ========================================================= */
  .form-section-title {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    margin: 0 0 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  /* Variante con margen superior para secciones intermedias */
  .form-section-title--spaced {
    margin-top: 25px;
  }

  /* Nota auxiliar bajo un campo */
  .form-hint {
    display: block;
    font-size: 11px;
    color: var(--color-text-subtle);
    margin-top: 4px;
  }
  .form-hint a {
    color: var(--color-primary);
    text-decoration: none;
  }
  .form-hint a:hover { text-decoration: underline; }
 /* =========================================================
     FORMULARIO EN TABLA (bulk actions)
     ========================================================= */
  /* Grid especial de configuración superior */
  .form-grid {
    display: grid;
    gap: 15px;
  }
  .form-grid--4col {
    grid-template-columns: repeat(4, 1fr);
  }
  .form-grid__span-2 { grid-column: span 2; }

  /* Sección con borde destacado (para config inicial) */
  .form-card--outlined {
    border: 2px solid var(--color-border);
  }

  /* =========================================================
     TABLA CON INPUTS (bulk actions)
     ========================================================= */
  .data-table--inputs th,
  .data-table--inputs td {
    padding: 10px;
    vertical-align: middle;
  }

  .data-table__checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary);
  }

  .data-table__input {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--color-input-border);
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
    transition: border-color 0.2s;
  }
  .data-table__input:focus {
    outline: none;
    border-color: var(--color-primary);
  }
  .data-table__input--code {
    font-family: var(--color-mono);
  }
  .data-table__input--number {
    width: 80px;
    text-align: right;
    font-weight: 700;
  }
  .data-table__input--accent {
    border-color: var(--color-warning);
    color: #744210;
  }

  .data-table__file {
    font-size: 11px;
    width: 100%;
  }

  /* Celda de acciones dentro de tabla */
  .data-table__cell--check { width: 30px; text-align: center; }
  .data-table__cell--employee { width: 160px; }
  .data-table__cell--commission { width: 110px; }
  .data-table__cell--ref { width: 110px; }
  .data-table__cell--salary { width: 85px; text-align: right; font-weight: 700; }
  .data-table__cell--adjust { width: 110px; text-align: center; }
  .data-table__cell--total { width: 120px; text-align: right; font-weight: 700; color: var(--color-primary-dark); }
  .data-table__cell--remove { width: 40px; text-align: center; }

  /* Botón de eliminar fila */
  .data-table__remove {
    background: none;
    border: none;
    color: var(--color-danger);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }
  .data-table__remove:hover { color: var(--color-danger-dark); }

  /* Worker ocasional (fila añadida por JS) */
  .data-table tr.is-occasional {
    background-color: var(--color-orange-soft);
  }
  /* =========================================================
     VARIANTE DE TABLA: DESACTIVADOS / ARCHIVADOS
     ========================================================= */
  .data-table--danger thead tr {
    background-color: var(--color-danger-soft);
    border-bottom: 2px solid var(--color-danger-bg);
    color: var(--color-danger-strong);
  }
  /* =========================================================
     DROPZONE DE ARCHIVO
     ========================================================= */
  .form-dropzone {
    margin-bottom: 30px;
    padding: 20px;
    border: 2px dashed var(--color-input-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s;
  }
  .form-dropzone:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft);
  }
  .form-dropzone__label {
    display: block;
    font-weight: 700;
    color: var(--color-code);
    margin-bottom: 8px;
    font-size: 14px;
    cursor: pointer;
  }
  .form-dropzone__hint {
    display: block;
    color: var(--color-text-muted);
    font-size: 12px;
    margin-bottom: 12px;
  }
  .form-dropzone__input {
    font-size: 14px;
    color: var(--color-code);
  }

  /* Variante de botón: naranja (advertencia) */
  .btn--warning {
    background: var(--color-warning);
    color: #ffffff;
  }
  .btn--warning:hover { background: var(--color-warning-dark); }
    .btn--teal {
    background: var(--color-teal);
    color: #ffffff;
  }
  .btn--teal:hover { background: var(--color-teal-dark); }
    /* =========================================================
     TÍTULO DE SECCIÓN CON BORDE (formularios extensos)
     ========================================================= */
  .form-section-heading {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary-dark);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 5px;
    margin: 0 0 15px;
  }
  .form-section-heading--spaced {
    margin-top: 25px;
  }

  /* Estado dentro del dropzone (archivo cargado) */
  .form-dropzone__status {
    font-size: 11px;
    color: var(--color-success-dark);
    margin: 5px 0 0;
    font-weight: 700;
  }

  /* Variante compacta del dropzone (para varios en fila) */
  .form-dropzone--compact {
    padding: 12px;
    text-align: left;
  }
    /* =========================================================
     GRID DE DOCUMENTOS ADJUNTOS (show)
     ========================================================= */
  .doc-grid {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
  }
  .doc-tile {
    flex: 1;
    min-width: 200px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px;
    text-align: center;
  }
  .doc-tile__icon {
    font-size: 24px;
    margin-bottom: 5px;
    display: block;
  }
  .doc-tile__label {
    font-weight: 700;
    font-size: 13px;
    color: var(--color-text);
    display: block;
  }
  .doc-tile__action {
    margin-top: 8px;
    display: block;
  }
  .doc-tile__action a {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
  }
  .doc-tile__action a:hover { text-decoration: underline; }
  .doc-tile__empty {
    color: var(--color-text-subtle);
    font-size: 12px;
    margin-top: 8px;
    display: block;
  }

  /* =========================================================
     ESTADO DE PÓLIZA (vigente / vencida)
     ========================================================= */
  .policy-status {
    color: var(--color-success-dark);
    font-weight: 700;
  }
  .policy-status--expired { color: var(--color-danger-dark); }
  .policy-status--missing { color: var(--color-text-subtle); font-weight: 400; }
  /* =========================================================
     PÁGINAS PÚBLICAS (about, contactanos, proyectos)
     ========================================================= */

  /* Header de página pública (hero reducido) */
  .pub-hero {
    padding: 60px 20px;
    background: linear-gradient(135deg, #ffffff 0%, #edf2f7 100%);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
  }
  .pub-hero__inner {
    max-width: 800px;
    margin: 0 auto;
  }
  .pub-hero__title {
    font-size: 38px;
    line-height: 1.2;
    font-weight: 800;
    color: var(--color-text-strong);
    margin: 15px 0 15px;
  }
  .pub-hero__text {
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
  }

  /* Sección genérica de contenido público */
  .pub-section {
    padding: 60px 20px;
    background: var(--color-surface);
  }
  .pub-section--alt {
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
  }
  .pub-section__inner {
    max-width: 1100px;
    margin: 0 auto;
  }
  .pub-section__title {
    font-size: 28px;
    font-weight: 800;
    color: var(--color-text-strong);
    margin: 0 0 15px;
  }
  .pub-section__text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text);
    margin: 0 0 15px;
  }
  .pub-section__actions {
    margin-top: 30px;
    text-align: center;
  }

  /* Grid para proyectos */
  .projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-top: 30px;
  }
  .project-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .project-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
  .project-card__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--color-border);
    overflow: hidden;
  }
  .project-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .project-card__body {
    padding: 20px;
  }
  .project-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-strong);
    margin: 0 0 8px;
  }
  .project-card__desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0;
  }
  .project-card__meta {
    font-size: 12px;
    color: var(--color-text-subtle);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }
  .project-card__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 0 0 16px;
    padding: 14px 0;
    border-top: 1px solid var(--color-border-soft);
    border-bottom: 1px solid var(--color-border-soft);
  }
  .project-card__detail dt {
    color: var(--color-text-subtle);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
  }
  .project-card__detail dd {
    color: var(--color-text);
    font-size: 13px;
    margin: 3px 0 0;
  }
  .project-card__detail time {
    white-space: nowrap;
  }
  @media (max-width: 480px) {
    .project-card__details {
      grid-template-columns: 1fr;
    }
  }

  /* Contacto: layout 2 columnas */
  .contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
  }
  @media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  }
  .contact-info__item {
    margin-bottom: 20px;
  }
  .contact-info__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text-subtle);
    letter-spacing: 0.5px;
    margin-bottom: 4px;
  }
  .contact-info__value {
    font-size: 16px;
    color: var(--color-text);
    font-weight: 500;
  }
  .contact-info__value a {
    color: var(--color-primary);
    text-decoration: none;
  }
  .contact-info__value a:hover { text-decoration: underline; }

/* =========================================================
     PANEL DE USUARIOS Y MATRIZ DE PERMISOS
     ========================================================= */
  .form-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    cursor: pointer;
  }
  .form-check__box {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--color-primary);
  }
  .form-check__text { display: block; }
  .form-check__text strong { color: var(--color-text-strong); }

  .perm-matrix {
    margin-top: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
  }
  .perm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }
  .perm-table thead tr {
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-border);
  }
  .perm-table th {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
  }
  .perm-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-border-soft);
  }
  .perm-table tbody tr:last-child td { border-bottom: none; }

  .perm-row--read  { background: var(--color-primary-soft); }
  .perm-row--write { background: var(--color-success-soft); }

  .perm-table__module {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--color-text-strong);
  }
  .perm-table__icon  { font-size: 18px; }
  .perm-table__th--center,
  .perm-table__td--center { text-align: center; width: 110px; }

  .perm-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
  }

  .user-modules {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .user-modules__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
  }
  .user-modules__chip--read  { background: var(--color-primary-soft); color: var(--color-primary-dark); }
  .user-modules__chip--write { background: var(--color-success-soft); color: var(--color-success-strong); }
/* =========================================================
     BARRA DE FILTROS Y PAGINACIÓN
     ========================================================= */
  .filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px 20px;
    margin-bottom: 20px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }
  .filter-bar__form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  .filter-bar__label {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-code);
  }
  .filter-bar__select {
    width: auto;
    min-width: 220px;
    padding: 8px 12px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
  }
  .filter-bar__select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
  }
  .filter-bar__balance {
    font-size: 13px;
    color: var(--color-text);
  }
  .filter-bar__balance strong { color: var(--color-text-strong); }

  .page__pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .pagination span { display: inline-block; }
  .pagination a,
  .pagination .page {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
  }
  .pagination a:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary-border);
    color: var(--color-primary-dark);
  }
  /* El número de página se dibuja en el <span>, no en el <a> interior. */
  .pagination .page a {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-primary-dark);
  }
  .pagination .page a:hover {
    background: transparent;
    border: none;
    text-decoration: underline;
  }
  .pagination .page.current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
  }
  .pagination .page.gap {
    border-color: transparent;
    background: transparent;
    color: var(--color-text-subtle);
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@layer responsive {

  @media (max-width: 768px) {
    /* Navbar */
    .navbar__inner {
      height: auto;
      flex-direction: column;
      align-items: flex-start;
      padding: 12px 16px;
      gap: 10px;
    }
    .navbar__menu { flex-wrap: wrap; gap: 12px; width: 100%; }
    .navbar__link { font-size: 14px; }
    .navbar__cta  { padding: 8px 14px; font-size: 13px; }

    /* Botones */
    .btn--lg,
    .btn-primary,
    .btn-secondary { padding: 12px 20px; font-size: 15px; }

    /* Hero */
    .hero { padding: 50px 16px; }
    .hero__inner { gap: 30px; }
    .hero__title { font-size: 30px; }
    .hero__text  { font-size: 16px; }

    /* About */
    .about { padding: 50px 16px; }
    .about__title { font-size: 26px; }

    /* Modules */
    .modules { padding: 60px 16px; }
    .modules__header { margin-bottom: 40px; }
    .modules__title { font-size: 26px; }

    /* Footer */
    .footer { padding: 40px 16px 20px; }
    .footer__inner { flex-direction: column; gap: 25px; }

    /* Página */
    .page { padding: 24px 16px; }
    .page__title { font-size: 22px; }
    .page__header { flex-direction: column; align-items: stretch; }
    .page__actions { width: 100%; }
    .page__actions > a { flex: 1; text-align: center; }

    /* Dashboard */
    .dashboard__grid { gap: 16px; }
    .dashboard-card { padding: 20px; }

    /* Tablas */
    .data-table th,
    .data-table td { padding: 10px 14px; font-size: 13px; }

    /* Stats */
    .stats-bar { gap: 10px; }
    .stat { min-width: 120px; padding: 12px 16px; }
    .stat__value { font-size: 18px; }

    /* Tabs / Settings */
    .tabs { gap: 6px; }
    .tab-link { padding: 6px 12px; font-size: 13px; }
    .settings-card { min-width: 100%; padding: 16px; }

    /* Auth */
    .auth-wrapper { padding: 40px 16px; }
    .auth-card { padding: 24px; }

    .pub-hero { padding: 40px 16px; }
    .pub-hero__title { font-size: 28px; }
    .pub-hero__text { font-size: 15px; }

    .pub-section { padding: 40px 16px; }
    .pub-section__title { font-size: 22px; }

  }

  @media (max-width: 480px) {
    .about__stats { grid-template-columns: 1fr; }
    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn-primary,
    .hero__actions .btn-secondary { text-align: center; }
    .page__header { align-items: flex-start; }

    .action-link--view,
    .action-link--edit,
    .action-link--delete {
      display: block;
      margin: 0 0 6px;
    }

    .stats-bar { flex-direction: column; }
    .tabs { flex-direction: column; }
    .tab-link { width: 100%; text-align: center; }
    .settings-table__actions > * {
      display: block;
      width: 100%;
      margin: 4px 0 !important;
      text-align: center;
    }
  }
}