/* =========================================
   DeCA En Regla - Hoja de estilos 
   ========================================= */

/* -----------------------------------------
   Variables CSS
   ----------------------------------------- */
:root {
    --color-primary: #f9c900;
    --color-primary-dark: #c79f00;
    --color-primary-darker: #8b7000;
    --color-secondary: #f1b900;
    --color-success: #198754;
    --color-success-light: #d1e7dd;
    --color-success-text: #0f5132;
    --color-danger: #bb1e2d;
    --color-danger-light: #f8d7da;
    --color-danger-text: #842029;
    --color-warning: #f6b900;
    --color-warning-light: #fff3cd;
    --color-warning-text: #664d03;
    --color-info: #0d6efd;
    --color-info-light: #cfe2ff;
    --color-info-text: #084298;
    --color-background: #f5f6fa;
    --color-surface: #ffffff;
    --color-border: #d9d9d9;
    --color-text: #252525;
    --color-text-muted: #626262;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .05);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, .10);
    --header-gradient: linear-gradient(135deg, #f9c900 0%, #f1b900 100%);
}

/* -----------------------------------------
   Reset y base
   ----------------------------------------- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    background: var(--color-background);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
}

a {
    color: inherit;
}

img {
    max-width: 100%;
}

/* -----------------------------------------
   Cabecera común (.header)
   ----------------------------------------- */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    color: #1f1f1f;
    background: var(--header-gradient);
    box-shadow: var(--shadow-sm);
}

.header-company {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.header-company-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    font-size: 25px;
    background: rgba(255, 255, 255, .34);
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: var(--radius-sm);
}

.header-company-data {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.header-company-label {
    color: rgba(31, 31, 31, .68);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
}

.header h1,
.header-company h1 {
    margin: 0;
    color: #1f1f1f;
    font-size: 22px;
    line-height: 1.2;
}

.header-nav,
.header-info,
.header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.header a,
.header-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
    color: #1f1f1f;
    text-decoration: none;
    background: rgba(255, 255, 255, .42);
    border: 1px solid rgba(0, 0, 0, .14);
    border-radius: var(--radius-sm);
    transition: background .2s ease;
}

.header a:hover,
.header-link:hover {
    background: rgba(255, 255, 255, .68);
}

.header-user {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 12px;
    color: #1f1f1f;
    font-size: 14px;
    background: rgba(255, 255, 255, .32);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: var(--radius-sm);
}

.header-user-name {
    font-size: 14px;
    font-weight: 700;
}

.header-user-role {
    align-self: center;
    margin-top: 2px;
    padding: 2px 8px;
    color: rgba(31, 31, 31, .76);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .28);
    border-radius: 999px;
}

/* -----------------------------------------
   Cabecera de aplicación (.app-header)
   ----------------------------------------- */
.app-header {
    position: relative;
}

.app-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.app-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    font-size: 25px;
    background: rgba(255, 255, 255, 0.34);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-sm);
}

.app-header-title {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.app-header-label {
    color: rgba(31, 31, 31, .68);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
}

.app-header-title h1 {
    margin: 0;
    color: #1f1f1f;
    font-size: 20px;
    line-height: 1.15;
}

.app-header-subtitle {
    color: rgba(31, 31, 31, 0.72);
    font-size: 12px;
    font-weight: 600;
}

.app-header-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #1f1f1f;
    font-family: Arial, sans-serif;
    font-size: 34px;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    transition: background 0.2s ease, transform 0.2s ease;
}

.app-header-back:hover {
    background: rgba(255, 255, 255, 0.68);
    transform: translateX(-2px);
}

.app-header-back:focus-visible {
    outline: 3px solid rgba(31, 31, 31, 0.35);
    outline-offset: 2px;
}

/* -----------------------------------------
   Menú de usuario (.user-menu)
   ----------------------------------------- */
.user-menu {
  position: relative;
  flex: 0 0 auto;
}

.user-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  color: #1f1f1f;
  background: rgba(255, 255, 255, 0.34);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s ease;
}

.user-menu-toggle:hover,
.user-menu-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.60);
  outline: none;
}

.user-menu-toggle-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  color: #1f1f1f;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 4px;
}

.user-menu-toggle-lines {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
}

.user-menu-toggle-lines span {
  display: block;
  height: 2px;
  background: rgba(31, 31, 31, 0.75);
  border-radius: 1px;
}

.user-menu-dropdown {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  width: 260px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.user-menu.is-open .user-menu-dropdown {
  display: block;
}

.user-menu-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.user-menu-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}

.user-menu-row-label {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-weight: 600;
}

.user-menu-row-value {
  color: var(--color-text);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu-divider {
  height: 1px;
  margin: 4px 0;
  background: #eeeeee;
}

.user-menu-plan-label {
  color: var(--color-primary-darker);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Acciones: mismo tamaño, fuente y padding para "Salir" y "Solicitar acceso" */
.user-menu-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  margin-top: 8px;
  padding: 8px 12px;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.2s ease;
}

.user-menu-upgrade-form {
  margin: 0;
}

.user-menu-action--upgrade {
  background: rgba(249, 148, 0, 0.75);
}

.user-menu-action--upgrade:hover {
  background: rgba(249, 148, 0, 0.9);
}

.user-menu-action--logout {
  background: var(--color-danger);
}

.user-menu-action--logout:hover {
  background: #98202a;
}

/* -----------------------------------------
   Cabecera: botón atrás (.header-page-title)
   ----------------------------------------- */
.header-page-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.header-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    color: #1f1f1f;
    font-family: Arial, sans-serif;
    font-size: 29px;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.header-back-button:hover {
    background: rgba(255, 255, 255, .35);
    transform: translateX(-2px);
}

.header-back-button:focus-visible {
    outline: 3px solid rgba(31, 31, 31, .35);
    outline-offset: 2px;
}

.header-page-title h1 {
    min-width: 0;
}

/* -----------------------------------------
   Layout y contenedores
   ----------------------------------------- */
.container {
    width: min(1400px, calc(100% - 40px));
    margin: 40px auto;
}

.container-narrow {
    width: min(900px, calc(100% - 40px));
    margin: 40px auto;
}

.card,
.dashboard-summary-card,
.dashboard-search-card,
.dashboard-recent-decas {
    margin-bottom: 20px;
    padding: 30px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card-header,
.dashboard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
}

.card h2,
.card-header h2 {
    margin: 0;
    color: var(--color-text);
    font-size: 20px;
}

.section-title {
    margin: 0 0 20px;
    padding-bottom: 15px;
    color: var(--color-primary);
    font-size: 20px;
    border-bottom: 2px solid #f0f0f0;
}

/* -----------------------------------------
   Grids
   ----------------------------------------- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* -----------------------------------------
   Botones
   ----------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 10px 20px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    border: 0;
    background: var(--header-gradient);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

.btn:hover {
    opacity: .92;
    transform: translateY(-1px);
}

.btn-primary {
    color: #1f1f1f;
    background: var(--header-gradient);
    border: 1px solid #b99300;
}

.btn-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.btn-secondary {
    color: #fff;
    background: #6c757d;
}

.btn-warning {
    color: #1f1f1f;
    background: #f6b900;
}

.btn-light {
    color: var(--color-text);
    background: #e9ecef;
}

.btn-small {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 12px;
}

.btn-block {
    width: 100%;
}

.btn-ver-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    color: #1f1f1f;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    background: #f9c900;
    border: 1px solid #b99300;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.btn-ver-pdf:hover {
    background: #ffd529;
    transform: translateY(-1px);
}

.btn-ver-pdf:focus-visible {
    outline: 3px solid rgba(95, 76, 0, 0.35);
    outline-offset: 2px;
}

/* -----------------------------------------
   Formularios
   ----------------------------------------- */
.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 15px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 15px;
}

.form-group label,
label {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 600;
}

.required {
    color: #c00;
}

input,
select,
textarea {
    width: 100%;
    padding: 10px;
    color: var(--color-text);
    font: inherit;
    background: #fff;
    border: 1px solid #d9dce1;
    border-radius: var(--radius-sm);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, .14);
}

textarea {
    min-height: 90px;
    resize: vertical;
}

.form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.form-static {
    padding: 8px 0;
    color: #333;
    font-weight: 500;
}

/* -----------------------------------------
   Alertas y badges
   ----------------------------------------- */
.alert {
    margin-bottom: 20px;
    padding: 15px;
    line-height: 1.6;
    border-radius: var(--radius-sm);
}

.alert-success {
    color: var(--color-success-text);
    background: var(--color-success-light);
    border: 1px solid #c3e6cb;
}

.alert-error {
    color: var(--color-danger-text);
    background: var(--color-danger-light);
    border: 1px solid #f5c6cb;
}

.alert-warning {
    color: var(--color-warning-text);
    background: var(--color-warning-light);
    border: 1px solid #ffeeba;
}

.alert-info {
    color: var(--color-info-text);
    background: var(--color-info-light);
    border: 1px solid #bee5eb;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
}

.badge-success {
    color: var(--color-success-text);
    background: var(--color-success-light);
}

.badge-danger {
    color: var(--color-danger-text);
    background: var(--color-danger-light);
}

.badge-warning {
    color: var(--color-warning-text);
    background: var(--color-warning-light);
}

.badge-info {
    color: var(--color-info-text);
    background: var(--color-info-light);
}

/* -----------------------------------------
   Tablas
   ----------------------------------------- */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
}

th,
td {
    padding: 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
}

th {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 600;
    background: #f8f9fa;
}

tr:hover {
    background: #f8f9fa;
}

.table-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

/* Encabezados centrados en tablas específicas */
.table-header-center thead th {
    text-align: center;
}

/* -----------------------------------------
   Tarjetas de menú
   ----------------------------------------- */
.menu-card {
    display: block;
    padding: 35px;
    color: inherit;
    text-align: center;
    text-decoration: none;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .2s ease, box-shadow .2s ease;
}

.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.menu-card .icon {
    margin-bottom: 15px;
    font-size: 48px;
}

.menu-card h3 {
    margin-bottom: 8px;
    color: var(--color-text);
    font-size: 18px;
}

.menu-card p {
    color: var(--color-text-muted);
    font-size: 13px;
}

/* -----------------------------------------
   Dashboard empresa
   ----------------------------------------- */
.dashboard-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 20px;
    margin: 30px 0;
}

.dashboard-section-header h3,
.dashboard-search-card h3 {
    margin: 0;
    color: var(--color-text);
    font-size: 18px;
}

.dashboard-section-header p,
.dashboard-search-card p {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: 13px;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-stat {
    padding: 14px 10px;
    text-align: center;
    background: #fff9df;
    border: 1px solid #f5df83;
    border-radius: var(--radius-sm);
}

.dashboard-stat-number {
    color: #5f4c00;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
}

.dashboard-stat-label {
    margin-top: 5px;
    color: #6d610f;
    font-size: 12px;
}

.dashboard-search-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    background: #fff9df;
    border: 1px solid #f5df83;
}

.dashboard-search-icon {
    font-size: 30px;
}

.dashboard-link {
    color: var(--color-primary-darker);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.dashboard-link:hover {
    text-decoration: underline;
}

.dashboard-recent-decas {
    margin-bottom: 30px;
}

.dashboard-page {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.dashboard-page .app-header-title h1 {
    margin: 0;
    color: #1f1f1f;
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.2;
}

.dashboard-page .container {
    border: 0 !important;
    outline: 0 !important;
}

.dashboard-page .app-header {
    position: relative;
    z-index: 10;
}

.dashboard-page .user-menu {
    position: relative;
    z-index: 20;
}

.dashboard-page .user-menu-toggle {
    position: relative;
    z-index: 21;
    appearance: none;
    -webkit-appearance: none;
}

.dashboard-page .user-menu-dropdown {
    z-index: 1000;
}

.dashboard-page .menu-grid,
.dashboard-page .menu-card {
    border: 0;
    outline: 0;
}

/* -----------------------------------------
   Dashboard administrador
   ----------------------------------------- */
.admin-welcome {
    margin: 30px 0;
    padding: 26px 30px;
    background: #fff9df;
    border: 1px solid #f5df83;
    border-radius: var(--radius-lg);
}

.admin-welcome h2 {
    margin: 0 0 8px;
    color: var(--color-text);
    font-size: 24px;
}

.admin-welcome p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 15px;
}

.admin-menu-grid,
.admin-stats-card,
.admin-recent-companies {
    margin-bottom: 30px;
}

.admin-menu-grid .menu-card {
    min-height: 210px;
}

/* -----------------------------------------
   Estadísticas de gestión de empresa
   ----------------------------------------- */
.empresa-stats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.empresa-stats-grid .dashboard-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 178px;
    padding: 20px 10px;
}

.empresa-stat-icon {
    margin-bottom: 12px;
    font-size: 46px;
    line-height: 1;
}

.empresa-stats-grid .dashboard-stat-number {
    font-size: 30px;
}

.empresa-stats-grid .dashboard-stat-label {
    min-height: 32px;
    margin-top: 7px;
    line-height: 1.25;
}

/* -----------------------------------------
   Acciones del dashboard de empresa
   ----------------------------------------- */
.dashboard-actions-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-actions-grid .menu-card {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 205px;
    padding: 22px 10px;
    border: 1px solid #f5df83;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.dashboard-actions-grid .menu-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.dashboard-actions-grid .menu-card .icon {
    margin-bottom: 13px;
    font-size: 47px;
    line-height: 1;
}

.dashboard-actions-grid .menu-card h3 {
    margin-bottom: 7px;
    font-size: 15px;
    line-height: 1.2;
}

.dashboard-actions-grid .menu-card p {
    max-width: 150px;
    font-size: 11px;
    line-height: 1.35;
}

/* -----------------------------------------
   Filtros de consulta
   ----------------------------------------- */
.consulta-filtros {
    width: min(100%, 1000px);
    margin-bottom: 24px;
}

.filtros-principales,
.filtros-avanzados-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 20px;
    align-items: center;
}

.filtro-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.filtro-inline label {
    flex: 0 0 auto;
    margin: 0;
}

.filtro-inline input,
.filtro-inline select {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.filtro-boton {
    display: flex;
    justify-content: flex-start;
}

.filtros-avanzados {
    margin-top: 16px;
    padding: 0;
    background: #fafbfc;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.filtros-avanzados summary {
    padding: 12px 14px;
    color: var(--color-primary-dark);
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

.filtros-avanzados[open] summary {
    border-bottom: 1px solid var(--color-border);
}

.filtros-avanzados-grid {
    padding: 16px;
}

/* -----------------------------------------
   Modales
   ----------------------------------------- */
.modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: none;
    overflow-y: auto;
    padding: 30px 20px;
    background: rgba(0, 0, 0, .5);
}

.modal.is-open {
    display: block;
}

.modal-content {
    width: min(560px, 100%);
    margin: 0 auto;
    padding: 30px;
    background: #fff;
    border-radius: var(--radius-lg);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 16px;
}

.btn-close {
    background: none;
    border: 0;
    font-size: 24px;
    cursor: pointer;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-content {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 100%;
    max-width: 520px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.btn-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

/* -----------------------------------------
   Login
   ----------------------------------------- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: var(--header-gradient);
}

.login-container {
    width: min(420px, 100%);
    padding: 40px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
}

.login-logo,
.logo {
    margin-bottom: 30px;
    text-align: center;
}

.login-logo-icon,
.logo-icon {
    margin-bottom: 10px;
    font-size: 48px;
}

.login-logo h1,
.logo h1 {
    margin-bottom: 8px;
    font-size: 28px;
}

.login-subtitle,
.subtitle {
    color: var(--color-text-muted);
    font-size: 14px;
    text-align: center;
}

.checkbox-group {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

.checkbox-group label {
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

.btn-login {
    width: 100%;
    padding: 14px;
    color: #1f1f1f;
    font-size: 16px;
    font-weight: 600;
    background: var(--color-primary);
    border: 1px solid #b99300;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.btn-login:hover {
    background: var(--color-primary-dark);
}

.help-text {
    margin-top: 20px;
    padding-top: 20px;
    color: #666;
    font-size: 13px;
    text-align: center;
    border-top: 1px solid #eee;
}

.footer {
    margin-top: 24px;
    color: #999;
    font-size: 12px;
    text-align: center;
}

/* -----------------------------------------
   Alta DeCA y QR
   ----------------------------------------- */
.nuevo-campo {
    display: none;
    margin-top: 15px;
    padding: 16px;
    background: #f8f9fa;
    border: 1px solid #dfe3e8;
    border-radius: var(--radius-sm);
}

.nuevo-campo.is-visible {
    display: block;
}

.btn-add {
    width: fit-content;
    margin-top: 8px;
}

.qr-section {
    padding: 30px;
    text-align: center;
    background: #f8f9fa;
    border-radius: var(--radius-md);
}

.qr-section-centered {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 16px;
}

.qr-description {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 15px;
}

.qr-image {
    display: block;
    width: min(300px, 100%);
    height: auto;
    margin: 4px auto;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    image-rendering: pixelated;
}

.qr-url-block {
    width: min(760px, 100%);
    text-align: left;
}

.qr-url {
    width: 100%;
    min-height: 74px;
    padding: 12px;
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    word-break: break-all;
    overflow-wrap: anywhere;
    resize: vertical;
}

.qr-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}

.qr-actions .btn {
    min-width: 170px;
}

.qr-missing {
    width: min(500px, 100%);
    padding: 20px;
    color: var(--color-warning-text);
    background: var(--color-warning-light);
    border: 1px solid #ffeeba;
    border-radius: var(--radius-sm);
}

/* -----------------------------------------
   Alta DeCA: formulario compacto
   ----------------------------------------- */
.deca-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.deca-form .deca-seccion {
    margin: 0;
    padding: 18px 0;
    border-bottom: 1px solid #eeeeee;
}

.deca-form .deca-seccion:first-child {
    padding-top: 0;
}

.deca-form .deca-seccion:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

.deca-form .deca-seccion h3 {
    margin: 0 0 12px;
    color: var(--color-text);
    font-size: 18px;
    line-height: 1.25;
}

.deca-form .form-row {
    gap: 12px;
    margin: 0 0 12px;
}

.deca-form .form-group {
    gap: 5px;
    margin: 0;
}

.deca-form .form-group label {
    font-size: 13px;
    line-height: 1.25;
}

.deca-form .form-group input,
.deca-form .form-group select,
.deca-form .form-group textarea {
    padding: 9px 10px;
}

.deca-form .form-group textarea {
    min-height: 78px;
}

.deca-form .maestro-busqueda {
    position: relative;
    margin-bottom: 8px;
}

.deca-form .maestro-resultados {
    position: absolute;
    z-index: 100;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    display: none;
    max-height: 280px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.deca-form .maestro-resultados.is-visible {
    display: block;
}

.deca-form .maestro-resultado {
    display: block;
    width: 100%;
    padding: 10px 12px;
    color: var(--color-text);
    text-align: left;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #eeeeee;
    cursor: pointer;
}

.deca-form .maestro-resultado:last-child {
    border-bottom: 0;
}

.deca-form .maestro-resultado:hover,
.deca-form .maestro-resultado:focus {
    background: #fff9df;
    outline: none;
}

.deca-form .maestro-resultado-titulo {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.deca-form .maestro-resultado-detalle {
    display: block;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.deca-form .maestro-resultado-inactivo {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 5px;
    color: var(--color-danger-text);
    font-size: 10px;
    font-weight: 700;
    background: var(--color-danger-light);
    border-radius: 999px;
}

.deca-form .maestro-seleccionado {
    display: none;
    margin: 8px 0 0;
    padding: 10px 12px;
    background: #fff9df;
    border: 1px solid #f5df83;
    border-radius: var(--radius-sm);
}

.deca-form .maestro-seleccionado.is-visible {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.deca-form .maestro-seleccionado-texto {
    min-width: 0;
}

.deca-form .maestro-seleccionado-titulo {
    display: block;
    font-size: 14px;
    font-weight: 700;
}

.deca-form .maestro-seleccionado-detalle {
    display: block;
    margin-top: 2px;
    color: var(--color-text-muted);
    font-size: 12px;
}

.deca-form .maestro-manual {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

.deca-form .maestro-manual.is-visible {
    display: block;
}

.deca-form .maestro-opciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 8px 0 0;
}

.deca-form .maestro-opciones label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
}

.deca-form .maestro-opciones input[type="checkbox"] {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

.deca-form .form-actions {
    margin-top: 20px;
}

.deca-form .maestro-opciones label {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    width: auto;
    margin: 0;
    text-align: left;
}

.deca-form .maestro-opciones input[type="checkbox"] {
    display: inline-block;
    flex: 0 0 auto;
    width: 16px !important;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    margin: 0;
    padding: 0;
    accent-color: var(--color-primary-dark);
    vertical-align: middle;
}

/* -----------------------------------------
   Utilidades
   ----------------------------------------- */
.text-muted {
    color: var(--color-text-muted);
}

.text-center {
    text-align: center;
}

.mt-1 {
    margin-top: 10px;
}

.mt-2 {
    margin-top: 20px;
}

.mt-3 {
    margin-top: 30px;
}

.mb-1 {
    margin-bottom: 10px;
}

.mb-2 {
    margin-bottom: 20px;
}

.mb-3 {
    margin-bottom: 30px;
}

.hidden {
    display: none !important;
}

.code {
    padding: 2px 6px;
    font-family: Consolas, Monaco, monospace;
    background: #f0f0f0;
    border-radius: 3px;
}

.sin-resultados {
    padding: 20px;
    color: var(--color-text-muted);
    text-align: center;
}

/* =========================================
   Responsive (todos los @media juntos)
   ========================================= */

/* -----------------------------------------
   @media (max-width: 1200px)
   ----------------------------------------- */
@media (max-width: 1200px) {
    .empresa-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-actions-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-actions-grid .menu-card {
        min-height: 185px;
        padding: 20px 12px;
    }

    .dashboard-actions-grid .menu-card .icon {
        font-size: 45px;
    }

    .dashboard-actions-grid .menu-card h3 {
        font-size: 16px;
    }

    .dashboard-actions-grid .menu-card p {
        font-size: 12px;
    }
}

/* -----------------------------------------
   @media (max-width: 900px)
   ----------------------------------------- */
@media (max-width: 900px) {
    .dashboard-summary-row {
        grid-template-columns: 1fr;
    }

    .dashboard-stats-grid {
        grid-template-columns: repeat(4, minmax(100px, 1fr));
        overflow-x: auto;
    }
}

/* -----------------------------------------
   @media (max-width: 800px)
   ----------------------------------------- */
@media (max-width: 800px) {
    .header {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-nav,
    .header-info,
    .header-actions {
        width: 100%;
    }

    .grid-2,
    .filtros-principales,
    .filtros-avanzados-grid {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 20px;
    }

    .filtro-inline {
        width: 100%;
    }

    .filtro-boton {
        justify-content: stretch;
    }

    .filtro-boton .btn {
        width: 100%;
    }
}

/* -----------------------------------------
   @media (max-width: 700px)
   ----------------------------------------- */
@media (max-width: 700px) {
    .header {
        display: grid;
        grid-template-columns: minmax(0, 67%) minmax(0, 33%);
        align-items: start;
        gap: 0;
        padding: 14px 12px 12px;
    }

    .header-company {
        grid-column: 1;
        align-items: flex-start;
        gap: 9px;
        width: 100%;
    }

    .header-company-icon {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
        font-size: 23px;
    }

    .header-company-label {
        margin-top: 2px;
        font-size: 9px;
    }

    .header-company-data h1 {
        margin-top: 4px;
        font-size: 18px;
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    .header-info {
        grid-column: 2;
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
        width: 100%;
        margin: 0;
        padding-left: 8px;
        background: transparent;
    }

    .header-user {
        align-items: center;
        width: 100%;
        min-width: 0;
        padding: 7px 4px;
        text-align: center;
        background: rgba(255, 255, 255, .38);
    }

    .header-user-name {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
        line-height: 1.15;
    }

    .header-user-role {
        max-width: 100%;
        margin-top: 3px;
        padding: 2px 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 8px;
    }

    .header-info > a {
        width: 100%;
        min-height: 31px;
        padding: 6px 5px;
        font-size: 11px;
        white-space: nowrap;
        background: rgba(255, 255, 255, .68);
        box-shadow: none;
    }

    .dashboard-page .header-info > a[href*="dashboard"] {
        display: none;
    }

    .menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .menu-card {
        min-height: 145px;
        padding: 18px 10px;
    }

    .menu-card .icon {
        margin-bottom: 10px;
        font-size: 38px;
    }

    .menu-card h3 {
        font-size: 15px;
        line-height: 1.2;
    }

    .menu-card p {
        font-size: 11px;
        line-height: 1.3;
    }

    .dashboard-summary-card,
    .dashboard-search-card,
    .dashboard-recent-decas {
        padding: 18px;
    }

    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-search-card .btn {
        width: 100%;
    }

    .dashboard-section-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .form-actions .btn {
        width: 100%;
    }

    .table-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        min-width: 180px;
    }

    .table-actions form {
        display: block !important;
        width: 100%;
        margin: 0;
    }

    .table-actions .btn,
    .table-actions button,
    .table-actions a {
        width: 100%;
        min-height: 35px;
        padding: 6px 5px;
        font-size: 11px;
        line-height: 1.1;
        white-space: normal;
        text-align: center;
    }

    table th:last-child,
    table td:last-child {
        min-width: 190px;
    }

    .container,
    .container-narrow {
        width: min(100% - 24px, 1400px);
        margin: 20px auto;
    }

    .header-page-title {
        gap: 5px;
    }

    .header-back-button {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        font-size: 26px;
    }

    .app-header {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 12px;
    }

    .app-header-left {
        flex: 1;
        gap: 8px;
        min-width: 0;
    }

    .app-header-icon {
        flex-basis: 39px;
        width: 39px;
        height: 39px;
        font-size: 22px;
    }

    .app-header-title h1 {
        font-size: 18px;
    }

    .app-header-subtitle {
        font-size: 11px;
    }

    .app-header-back {
        flex-basis: 31px;
        width: 31px;
        height: 31px;
        font-size: 29px;
    }

    .user-menu-toggle {
        height: 39px;
        padding: 0 8px;
    }
    .user-menu-toggle-avatar {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .user-menu-dropdown {
        width: 205px;
    }

    .empresa-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .empresa-stats-grid .dashboard-stat {
        min-height: 150px;
        padding: 16px 8px;
    }

    .empresa-stat-icon {
        margin-bottom: 10px;
        font-size: 38px;
    }

    .empresa-stats-grid .dashboard-stat-number {
        font-size: 26px;
    }

    .empresa-stats-grid .dashboard-stat-label {
        min-height: 28px;
        font-size: 11px;
    }

    .deca-form .deca-seccion {
        padding: 14px 0;
    }

    .deca-form .deca-seccion h3 {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .deca-form .form-row {
        gap: 9px;
        margin-bottom: 9px;
    }

    .deca-form .form-group {
        gap: 4px;
    }

    .deca-form .form-group label {
        font-size: 12px;
    }

    .deca-form .form-group input,
    .deca-form .form-group select,
    .deca-form .form-group textarea {
        min-height: 38px;
        padding: 8px 9px;
        font-size: 14px;
    }

    .deca-form .form-group textarea {
        min-height: 68px;
    }

    .deca-form .maestro-busqueda {
        margin-bottom: 6px;
    }

    .deca-form .maestro-opciones {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        margin-top: 7px;
    }

    .deca-form .maestro-opciones label {
        font-size: 12px;
    }

    .deca-form .maestro-seleccionado.is-visible {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .deca-form .maestro-seleccionado .btn {
        width: 100%;
    }

    .deca-form .maestro-manual {
        margin-top: 10px;
        padding-top: 10px;
    }

    .deca-form .form-actions {
        gap: 8px;
        margin-top: 16px;
    }

    .deca-form .maestro-opciones {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .deca-form .maestro-opciones label {
        display: inline-flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
        min-height: 22px;
        gap: 8px;
        margin: 0;
        font-size: 13px;
        line-height: 1.25;
        text-align: left;
    }

    .deca-form .maestro-opciones input[type="checkbox"] {
        flex: 0 0 16px;
        width: 16px !important;
        min-width: 16px;
        height: 16px;
        min-height: 16px;
        margin: 0;
        padding: 0;
    }
}

/* -----------------------------------------
   @media (max-width: 480px)
   ----------------------------------------- */
@media (max-width: 480px) {
    .login-container {
        padding: 30px 20px;
    }

    .login-logo h1,
    .logo h1 {
        font-size: 24px;
    }
}

.info-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px 20px;
    padding-top: 6px;
}

.info-item-compact {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
}

.info-label-compact {
    font-weight: 600;
    color: #626262;
    font-size: 13px;
    min-width: 120px;
    flex-shrink: 0;
}

.info-value-compact {
    color: #252525;
    font-size: 14px;
    word-break: break-word;
}

.section-title-deca {
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f9c900;
    color: #252525;
    font-size: 16px;
    font-weight: 700;
}

@media (max-width: 700px) {
    .info-grid-compact {
        grid-template-columns: 1fr;
    }
    
    .info-item-compact {
        flex-direction: column;
        gap: 4px;
    }
    
    .info-label-compact {
        min-width: auto;
        font-size: 12px;
    }
}

.route-section {
    margin-bottom: 20px;
}

.route-section:last-child {
    margin-bottom: 0;
}

.route-subtitle {
    margin: 0 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
    color: #252525;
    font-size: 14px;
    font-weight: 600;
}

/* =========================================================
   Página pública: estilos trasladados desde index.html
   Todos quedan aislados bajo .landing-page.
   ========================================================= */
body.landing-page {
      --bg: #f5f6fa;
      --surface: #fff;
      --soft: #fff9df;
      --line: #dedfe4;
      --text: #252525;
      --muted: #626262;
      --yellow: #f9c900;
      --yellow-dark: #f1b900;
      --dark: #252525;
      --purple: #6e5bc7;
      --display: "Cabinet Grotesk", "Arial", sans-serif;
      --body: "Satoshi", "Arial", sans-serif;
      --shadow: 0 12px 36px rgba(46, 37, 0, .12);
      --radius: 1rem;
    }

    .landing-page *,
.landing-page *::before,
.landing-page *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html:has(body.landing-page) {
      scroll-behavior: smooth;
    }

    body.landing-page {
      min-height: 100vh;
      background: var(--bg);
      color: var(--text);
      font: clamp(1rem, .95rem + .25vw, 1.125rem) / 1.6 var(--body);
      -webkit-font-smoothing: antialiased;
    }

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

    .landing-page a {
      color: inherit;
    }

    .landing-page button,
.landing-page input,
.landing-page textarea {
      font: inherit;
    }

    .landing-page h1,
.landing-page h2,
.landing-page h3 {
      font-family: var(--display);
      line-height: 1.08;
    }

    .landing-page p {
      text-wrap: pretty;
    }

    .landing-page .shell {
      width: min(1160px, calc(100% - 2rem));
      margin-inline: auto;
    }

    .landing-page .site-header {
      padding: 1rem 0;
      background: var(--bg);
    }

    .landing-page .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .landing-page .brand {
      display: inline-flex;
      align-items: center;
      gap: .75rem;
      text-decoration: none;
    }

    .landing-page .brand-mark {
      width: 42px;
    }

    .landing-page .brand-name {
      font: 800 clamp(1.25rem, 1rem + 1vw, 1.7rem) / 1 var(--display);
    }

    .landing-page .brand-name span {
      color: #8b7000;
    }

    .landing-page .header-contact {
      font-size: .95rem;
      font-weight: 700;
      text-align: right;
    }

    .landing-page .header-contact a {
      color: #5c4a00;
      text-decoration: none;
    }

    .landing-page .hero {
      position: relative;
      overflow: hidden;
      padding: clamp(3rem, 7vw, 6rem) 0 5rem;
      background: linear-gradient(135deg, #f9c900, #f1b900);
      border-radius: 0 0 var(--radius) var(--radius);
    }

    .landing-page .hero::after {
      content: "";
      position: absolute;
      width: min(44vw, 650px);
      aspect-ratio: 1;
      right: -14vw;
      top: -20vw;
      border: clamp(55px, 8vw, 130px) solid rgba(255, 255, 255, .18);
      border-radius: 50%;
      pointer-events: none;
    }

    .landing-page .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
      align-items: center;
      gap: clamp(2rem, 5vw, 5rem);
    }

    .landing-page .hero-copy {
      min-width: 0;
    }

    .landing-page .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .25rem .75rem;
      color: #3c3100;
      background: rgba(255, 255, 255, .54);
      border: 1px solid rgba(31, 31, 31, .14);
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: .03em;
      text-transform: uppercase;
    }

    .landing-page .status-dot {
      width: 8px;
      height: 8px;
      background: #2b7b37;
      border-radius: 50%;
    }

    .landing-page h1 {
      max-width: 700px;
      margin-top: 1.25rem;
      font-size: clamp(2.1rem, 1.35rem + 2.65vw, 4.1rem);
      letter-spacing: -.045em;
    }

    .landing-page .lead {
      max-width: 58ch;
      margin-top: 1.25rem;
      color: #443d20;
      font-weight: 500;
    }

    .landing-page .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-top: 1.75rem;
    }

    .landing-page .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: .75rem 1.5rem;
      background: var(--dark);
      color: #fff;
      border: 1px solid #111;
      border-radius: .375rem;
      font-size: .95rem;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 8px 20px rgba(31, 31, 31, .14);
      transition: .18s ease;
    }

    .landing-page .button:hover {
      transform: translateY(-2px);
      background: #3a3a35;
    }

    .landing-page .button.secondary {
      color: #3e3200;
      background: rgba(255, 255, 255, .6);
      border-color: rgba(31, 31, 31, .22);
      box-shadow: none;
    }

    .landing-page .hero-visual {
      position: relative;
      min-width: 0;
      padding: 1.25rem;
    }

    .landing-page .visual-card {
      overflow: hidden;
      padding: .75rem;
      background: rgba(255, 255, 255, .86);
      border: 1px solid rgba(31, 31, 31, .13);
      border-radius: var(--radius);
      box-shadow: 0 22px 68px rgba(46, 37, 0, .16);
      transform: rotate(1.35deg);
    }

    .landing-page .visual-card img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      border-radius: .75rem;
      background: #fff;
    }

    .landing-page .visual-card::before {
      content: "PRUEBA GRATUITA";
      position: absolute;
      top: 1.5rem;
      left: 1.5rem;
      z-index: 1;
      padding: .5rem .75rem;
      color: #3e3200;
      background: rgba(249, 201, 0, .94);
      border-radius: .375rem;
      font-size: .8rem;
      font-weight: 800;
    }

    .landing-page .mini-card {
      position: absolute;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      gap: .75rem;
      max-width: 270px;
      padding: 1rem;
      background: #fff;
      border: 1px solid rgba(37, 37, 37, .13);
      border-radius: .75rem;
      box-shadow: var(--shadow);
    }

    .landing-page .mini-icon {
      display: grid;
      place-items: center;
      flex: 0 0 40px;
      width: 40px;
      height: 40px;
      background: var(--yellow);
      border-radius: .375rem;
    }

    .landing-page .mini-icon svg {
      width: 21px;
    }

    .landing-page .mini-card strong {
      display: block;
      font-size: .95rem;
      line-height: 1.2;
    }

    .landing-page .mini-card span {
      display: block;
      margin-top: .25rem;
      color: var(--muted);
      font-size: .8rem;
      line-height: 1.3;
    }

    .landing-page .section {
      padding: clamp(3rem, 6vw, 5rem) 0;
    }

    .landing-page .section-heading {
      max-width: 720px;
      margin-bottom: 2rem;
    }

    .landing-page .section-heading h2 {
      font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
      letter-spacing: -.035em;
    }

    .landing-page .section-heading p {
      margin-top: .75rem;
      color: var(--muted);
    }

    .landing-page .process-section {
      background: #fff;
    }

    .landing-page .process-grid {
      position: relative;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1rem;
    }

    .landing-page .process-grid::before {
      content: "";
      position: absolute;
      top: 58px;
      right: 9%;
      left: 9%;
      height: 4px;
      background: linear-gradient(90deg, var(--yellow), var(--purple));
      border-radius: 999px;
    }

    .landing-page .process-step {
      position: relative;
      z-index: 1;
      text-align: center;
    }

    .landing-page .process-number {
      display: grid;
      place-items: center;
      width: 76px;
      height: 76px;
      margin: 0 auto 1.25rem;
      color: #3e3200;
      background: var(--yellow);
      border: 8px solid #fff;
      border-radius: 50%;
      box-shadow: 0 0 0 2px var(--yellow-dark), var(--shadow);
      font: 800 1.5rem / 1 var(--display);
    }

    .landing-page .process-step:nth-child(2) .process-number {
      background: #ffe77d;
    }

    .landing-page .process-step:nth-child(3) .process-number {
      color: #fff;
      background: var(--dark);
      box-shadow: 0 0 0 2px var(--dark), var(--shadow);
    }

    .landing-page .process-step:nth-child(4) .process-number {
      color: #fff;
      background: var(--purple);
      box-shadow: 0 0 0 2px var(--purple), var(--shadow);
    }

    .landing-page .process-step h3 {
      font-size: 1.25rem;
    }

    .landing-page .process-step p {
      margin-top: .5rem;
      color: var(--muted);
      font-size: .95rem;
      line-height: 1.45;
    }

    .landing-page .process-cta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      margin-top: 2.5rem;
      padding: 1.25rem 1.5rem;
      background: var(--soft);
      border: 1px solid #f0df8b;
      border-radius: .75rem;
    }

    .landing-page .process-cta strong {
      display: block;
      font-family: var(--display);
      font-size: 1.25rem;
    }

    .landing-page .process-cta span {
      display: block;
      margin-top: .25rem;
      color: var(--muted);
      font-size: .95rem;
    }

    .landing-page .pricing-section {
      background: var(--soft);
    }

    .landing-page .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
    }

    .landing-page .price-card {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 1.75rem;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
    }

    .landing-page .price-card.featured {
      border: 2px solid var(--yellow-dark);
      transform: translateY(-8px);
      box-shadow: var(--shadow);
    }

    .landing-page .price-card h3 {
      font-size: 1.45rem;
    }

    .landing-page .price-card .price {
      margin: 1rem 0;
      font: 800 2.5rem / 1 var(--display);
    }

    .landing-page .price-card .price small {
      color: var(--muted);
      font: 500 1rem var(--body);
    }

    .landing-page .price-card ul {
      margin: 0 0 1.5rem;
      padding-left: 1.2rem;
      color: var(--muted);
      font-size: .95rem;
    }

    .landing-page .price-card li + li {
      margin-top: .4rem;
    }

    .landing-page .price-card .button {
      width: 100%;
      margin-top: auto;
    }

    .landing-page .badge {
      position: absolute;
      top: -14px;
      right: 1rem;
      padding: .3rem .7rem;
      background: var(--yellow);
      border-radius: 999px;
      color: #3e3200;
      font-size: .75rem;
      font-weight: 800;
    }

    .landing-page .trial-note {
      margin-top: 1.25rem;
      padding: 1rem 1.25rem;
      color: #3e3200;
      background: var(--yellow);
      border-radius: .75rem;
      text-align: center;
      font-weight: 800;
    }

    .landing-page .faq-section {
      background: #eeeff6;
    }

    .landing-page .faq-list {
      display: grid;
      gap: .85rem;
    }

    .landing-page .faq-item {
      overflow: hidden;
      background: #fff;
      border: 1px solid #deddea;
      border-radius: .75rem;
      box-shadow: 0 2px 8px rgba(20, 20, 60, .04);
    }

    .landing-page .faq-item summary {
      cursor: pointer;
      padding: 1.25rem 1.5rem;
      font-weight: 700;
      list-style: none;
    }

    .landing-page .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .landing-page .faq-item summary::after {
      content: "+";
      float: right;
      color: #6e5bc7;
      font-size: 1.4rem;
    }

    .landing-page .faq-item[open] summary::after {
      content: "−";
    }

    .landing-page .faq-answer {
      padding: 0 1.5rem 1.25rem;
      color: #777786;
    }

    .landing-page .contact-section {
      background: var(--dark);
      color: #fff;
    }

    .landing-page .contact-layout {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      align-items: start;
      gap: clamp(2rem, 5vw, 5rem);
    }

    .landing-page .contact-copy h2 {
      font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
    }

    .landing-page .contact-copy p {
      margin-top: .75rem;
      color: #d7d7d0;
    }

    .landing-page .contact-form {
      display: grid;
      gap: 1rem;
      padding: 1.5rem;
      background: #fff;
      color: var(--text);
      border-radius: var(--radius);
    }

    .landing-page .contact-form label {
      display: grid;
      gap: .35rem;
      font-size: .9rem;
      font-weight: 700;
    }

    .landing-page .contact-form input,
.landing-page .contact-form textarea {
      width: 100%;
      padding: .75rem 1rem;
      color: var(--text);
      background: #fff;
      border: 1px solid #cfd0d8;
      border-radius: .4rem;
    }

    .landing-page .contact-form textarea {
      min-height: 130px;
      resize: vertical;
    }

    .landing-page .contact-form .button {
      cursor: pointer;
      border: 0;
    }

    .landing-page .form-note {
      color: #6c6c76;
      font-size: .8rem;
    }

    .landing-page footer {
      padding: 2rem 0;
      color: var(--muted);
      font-size: .8rem;
    }

    .landing-page .footer-inner {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--line);
    }

    @media (max-width: 930px) {
      .landing-page .hero-grid,
.landing-page .contact-layout {
        grid-template-columns: 1fr;
      }

      .landing-page .hero-visual {
        max-width: 680px;
        margin-inline: auto;
      }

      .landing-page .process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
      }

      .landing-page .process-grid::before {
        display: none;
      }

      .landing-page .pricing-grid {
        grid-template-columns: 1fr;
      }

      .landing-page .price-card.featured {
        transform: none;
      }
    }

    @media (max-width: 600px) {
      .landing-page .shell {
        width: min(100% - 1.5rem, 1160px);
      }

      .landing-page .header-inner {
        align-items: flex-start;
      }

      .landing-page .header-contact {
        max-width: 48%;
        font-size: .75rem;
      }

      .landing-page .hero {
        padding-top: 2.5rem;
      }

      .landing-page .hero-actions {
        flex-direction: column;
      }

      .landing-page .button {
        width: 100%;
      }

      .landing-page .hero-visual {
        padding: 0 0 2rem;
      }

      .landing-page .visual-card {
        transform: none;
      }

      .landing-page .mini-card {
        right: .75rem;
        bottom: .5rem;
        max-width: calc(100% - 1.5rem);
      }

      .landing-page .process-grid {
        grid-template-columns: 1fr;
      }

      .landing-page .process-cta {
        align-items: stretch;
        flex-direction: column;
      }

      .landing-page .footer-inner {
        align-items: flex-start;
        flex-direction: column;
      }
    }

/* =========================================================
   Registro público: estilos trasladados desde registro.php
   Todos quedan aislados bajo .register-page.
   ========================================================= */
body.register-page {
            --register-bg: #f5f6fa;
            --register-surface: #ffffff;
            --register-soft: #fff9df;
            --register-line: #dedfe4;
            --register-text: #252525;
            --register-muted: #626262;
            --register-yellow: #f9c900;
            --register-yellow-dark: #f1b900;
            --register-dark: #252525;
            --register-display: "Cabinet Grotesk", "Arial", sans-serif;
            --register-body: "Satoshi", "Arial", sans-serif;
            --register-shadow: 0 16px 42px rgba(46, 37, 0, .12);
            --register-radius: 1rem;
        }

        body.register-page {
            min-height: 100vh;
            margin: 0;
            padding: 0;
            background: var(--register-bg);
            color: var(--register-text);
            font-family: var(--register-body);
        }

        .register-page .register-shell {
            width: min(1160px, calc(100% - 2rem));
            margin-inline: auto;
        }

        .register-page .register-header {
            padding: 1rem 0;
            background: var(--register-bg);
        }

        .register-page .register-header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .register-page .register-brand {
            display: inline-flex;
            align-items: center;
            gap: .75rem;
            color: var(--register-text);
            font: 800 clamp(1.25rem, 1rem + 1vw, 1.7rem) / 1 var(--register-display);
            text-decoration: none;
        }

        .register-page .register-brand-mark {
            display: block;
            width: 42px;
        }

        .register-page .register-brand span {
            color: #8b7000;
        }

        .register-page .register-header-link {
            color: #5c4a00;
            font-size: .95rem;
            font-weight: 700;
            text-decoration: none;
        }

        .register-page .register-hero {
            padding: clamp(2.5rem, 6vw, 5rem) 0;
            background: linear-gradient(135deg, #f9c900, #f1b900);
            border-radius: 0 0 var(--register-radius) var(--register-radius);
        }

        .register-page .register-layout {
            display: grid;
            grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
            align-items: start;
            gap: clamp(2rem, 5vw, 5rem);
        }

        .register-page .register-intro {
            position: sticky;
            top: 1.5rem;
        }

        .register-page .register-eyebrow {
            display: inline-flex;
            padding: .35rem .8rem;
            color: #3c3100;
            background: rgba(255, 255, 255, .58);
            border: 1px solid rgba(31, 31, 31, .14);
            border-radius: 999px;
            font-size: .8rem;
            font-weight: 800;
            letter-spacing: .03em;
            text-transform: uppercase;
        }

        .register-page .register-intro h1 {
            max-width: 520px;
            margin-top: 1.25rem;
            color: #1f1f1f;
            font: 800 clamp(2.35rem, 1.5rem + 3vw, 4.4rem) / 1.02 var(--register-display);
            letter-spacing: -.045em;
        }

        .register-page .register-intro p {
            max-width: 48ch;
            margin-top: 1.25rem;
            color: #443d20;
        }

        .register-page .register-benefits {
            display: grid;
            gap: .75rem;
            margin-top: 2rem;
            list-style: none;
        }

        .register-page .register-benefits li {
            display: flex;
            gap: .65rem;
            align-items: flex-start;
            color: #443d20;
            font-weight: 700;
        }

        .register-page .register-benefits li::before {
            content: "✓";
            display: grid;
            place-items: center;
            flex: 0 0 24px;
            width: 24px;
            height: 24px;
            color: #3e3200;
            background: var(--register-yellow);
            border-radius: 50%;
            font-weight: 900;
        }

        .register-page .register-card {
            padding: clamp(1.25rem, 3vw, 2.5rem);
            background: var(--register-surface);
            border: 1px solid rgba(37, 37, 37, .1);
            border-radius: var(--register-radius);
            box-shadow: var(--register-shadow);
        }

        .register-page .register-card h2 {
            margin-bottom: .35rem;
            font: 800 clamp(1.5rem, 1.2rem + 1vw, 2.25rem) / 1.08 var(--register-display);
        }

        .register-page .register-card-intro {
            margin-bottom: 1.5rem;
            color: var(--register-muted);
        }

        .register-page .register-alert {
            margin-bottom: 1.25rem;
            padding: 1rem 1.1rem;
            border-radius: .65rem;
            font-size: .95rem;
        }

        .register-page .register-alert strong {
            display: block;
            margin-bottom: .25rem;
        }

        .register-page .register-alert p + p {
            margin-top: .5rem;
        }

        .register-page .register-alert-error {
            color: #7f1d1d;
            background: #fef2f2;
            border: 1px solid #fecaca;
        }

        .register-page .register-alert-info {
            color: #514717;
            background: var(--register-soft);
            border: 1px solid #f0df8b;
        }

        .register-page .register-alert-success {
            color: #14532d;
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
        }

        .register-page .register-form {
            display: grid;
            gap: 1rem;
        }

        .register-page .register-form-section {
            display: grid;
            gap: 1rem;
            padding: 1.25rem;
            border: 1px solid var(--register-line);
            border-radius: .75rem;
        }

        .register-page .register-form-section h3 {
            margin-bottom: .25rem;
            font: 800 1.25rem / 1.1 var(--register-display);
        }

        .register-page .register-form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .register-page .register-form-group {
            display: grid;
            gap: .4rem;
        }

        .register-page .register-form-group.full {
            grid-column: 1 / -1;
        }

        .register-page .register-form-group label {
            font-size: .9rem;
            font-weight: 700;
        }

        .register-page .register-form input[type="text"],
.register-page .register-form input[type="email"],
.register-page .register-form input[type="tel"] {
            width: 100%;
            min-height: 46px;
            padding: .7rem .85rem;
            color: var(--register-text);
            background: #fff;
            border: 1px solid #cfd0d8;
            border-radius: .4rem;
        }

        .register-page .register-form input:focus {
            outline: 3px solid rgba(249, 201, 0, .35);
            border-color: var(--register-yellow-dark);
        }

        .register-page .register-terms {
            display: flex;
            align-items: flex-start;
            gap: .65rem;
            color: var(--register-muted);
            font-size: .9rem;
        }

        .register-page .register-terms input {
            flex: 0 0 auto;
            width: 18px;
            height: 18px;
            margin-top: .2rem;
            accent-color: var(--register-yellow-dark);
        }

        .register-page .register-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 52px;
            padding: .8rem 1.5rem;
            color: #fff;
            background: var(--register-dark);
            border: 1px solid #111;
            border-radius: .4rem;
            font-weight: 800;
            cursor: pointer;
            transition: .18s ease;
        }

        .register-page .register-button:hover {
            background: #3a3a35;
            transform: translateY(-2px);
        }

        .register-page .register-back {
            display: inline-flex;
            justify-content: center;
            width: 100%;
            min-height: 48px;
            padding: .7rem 1rem;
            color: #3e3200;
            background: var(--register-yellow);
            border-radius: .4rem;
            font-weight: 800;
            text-decoration: none;
        }

        .register-page .register-help {
            margin-top: 1.25rem;
            color: var(--register-muted);
            text-align: center;
            font-size: .9rem;
        }

        .register-page .register-help a {
            color: #5c4a00;
            font-weight: 800;
        }

        .register-page .register-footer {
            padding: 1.5rem 0 2rem;
            color: var(--register-muted);
            font-size: .8rem;
            text-align: center;
        }

        @media (max-width: 930px) {
            .register-page .register-layout {
                grid-template-columns: 1fr;
            }

            .register-page .register-intro {
                position: static;
                text-align: center;
            }

            .register-page .register-intro h1,
.register-page .register-intro p {
                margin-inline: auto;
            }

            .register-page .register-benefits {
                width: fit-content;
                margin-inline: auto;
                text-align: left;
            }
        }

        @media (max-width: 600px) {
            .register-page .register-shell {
                width: min(100% - 1.5rem, 1160px);
            }

            .register-page .register-header-inner {
                align-items: flex-start;
            }

            .register-page .register-header-link {
                font-size: .8rem;
                text-align: right;
            }

            .register-page .register-hero {
                padding-top: 2.5rem;
            }

            .register-page .register-form-grid {
                grid-template-columns: 1fr;
            }

            .register-page .register-form-group.full {
                grid-column: auto;
            }
        }

/* =========================================================
   Cabecera pública compartida: index.html y registro.php
   ========================================================= */
.public-page {
    --public-bg: #f5f6fa;
    --public-surface: #ffffff;
    --public-text: #252525;
    --public-muted: #626262;
    --public-yellow: #f9c900;
    --public-yellow-dark: #c79f00;
    --public-display: "Cabinet Grotesk", "Segoe UI", sans-serif;
    --public-body: "Satoshi", "Segoe UI", sans-serif;
}

.public-header {
    position: relative;
    z-index: 100;
    width: 100%;
    background: var(--public-bg);
    border-bottom: 1px solid rgba(37, 37, 37, .08);
}

.public-shell {
    width: min(1160px, calc(100% - 2rem));
    margin-inline: auto;
}

.public-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 76px;
}

.public-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .75rem;
    color: var(--public-text);
    text-decoration: none;
}

.public-brand-mark {
    display: block;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
}

.public-brand-name {
    color: var(--public-text);
    font: 800 clamp(1.2rem, 1rem + .8vw, 1.65rem) / 1 var(--public-display);
    white-space: nowrap;
}

.public-brand-name span {
    color: #8b7000;
}

.public-header-nav,
.public-header-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.public-header-nav {
    justify-content: center;
    margin-left: auto;
}

.public-nav-link,
.public-header-link,
.public-header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: .65rem .8rem;
    color: #4e4e4e;
    font-family: var(--public-body);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    border-radius: .45rem;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.public-nav-link:hover,
.public-header-link:hover {
    color: #5c4a00;
    background: #fff9df;
}

.public-header-link {
    padding-inline: .9rem;
    color: #4b3d00;
    background: var(--public-surface);
    border: 1px solid #d8c56a;
    white-space: nowrap;
}

.public-header-cta {
    padding-inline: 1rem;
    color: #1f1f1f;
    background: var(--public-yellow);
    border: 1px solid #b99300;
    white-space: nowrap;
}

.public-header-cta:hover {
    background: #ffd529;
    transform: translateY(-1px);
}

.public-brand:focus-visible,
.public-nav-link:focus-visible,
.public-header-link:focus-visible,
.public-header-cta:focus-visible {
    outline: 3px solid rgba(95, 76, 0, .35);
    outline-offset: 2px;
}

@media (max-width: 980px) {
    .public-header-nav {
        display: none;
    }
}

@media (max-width: 600px) {
    .public-shell {
        width: min(100% - 1.5rem, 1160px);
    }

    .public-header-inner {
        gap: .75rem;
        min-height: 68px;
    }

    .public-brand {
        gap: .55rem;
        min-width: 0;
    }

    .public-brand-mark {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
    }

    .public-brand-name {
        overflow: hidden;
        font-size: 1.15rem;
        text-overflow: ellipsis;
    }

    .public-header-link {
        display: none;
    }

    .public-header-cta {
        min-height: 40px;
        padding: .55rem .75rem;
        font-size: .8rem;
    }
}


.dashboard-stats-grid--acceso {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

.form-actions--center {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}

@media (max-width: 640px) {
    .dashboard-stats-grid--acceso {
        grid-template-columns: 1fr;
    }

    .dashboard-stats-grid--acceso .dashboard-stat--fecha {
        grid-column: 1 / -1;
    }

    .dashboard-stats-grid--acceso .dashboard-stat:not(.dashboard-stat--fecha) {
        grid-column: span 1;
    }
}

/* Para que fecha ocupe fila completa y los otros 2 se repartan la segunda fila en móvil */
@media (max-width: 640px) {
    .dashboard-stats-grid--acceso {
        grid-template-columns: 1fr 1fr;
    }
    .dashboard-stats-grid--acceso .dashboard-stat--fecha {
        grid-column: 1 / -1;
    }
}

.user-menu-plan {
    display: inline-block;
    margin-top: 4px;
    margin-bottom: 8px;
    font-size: 0.75rem;
}

.user-menu-upgrade-form {
    margin: 8px 0;
}

.user-menu-upgrade-btn {
    width: 100%;
}