/* ──────────────────────────────────────────────────────────────
   Λ U R Ø — components.css
   Componentes UI: totales, tarjetas, formularios, modales,
   banners, autocomplete, tutorial, etc.
   Las variaciones por breakpoint viven en responsive.css.
   ────────────────────────────────────────────────────────────── */

/* ── Totales y estado de sincronización (cabecera) ── */
.total-main{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:600;color:var(--amber)}
.total-sub{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.2px;font-weight:700}
.sync-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:background .3s}
.sync-dot.ok{background:var(--cobrado)}
.sync-dot.warn{background:var(--warn)}
/* Feedback visual: animación de pulse cuando se guarda borrador automático */
.sync-dot.saving{animation:dotSave .6s ease-out}
.sync-text{color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ── Barra de totales por estado ── */
.totals-bar{
  display:flex;
  margin:14px 0 0 0;
  border:1px solid var(--border);border-radius:10px;
  overflow:hidden;background:transparent;
}
.tot{
  flex:1 1 0;padding:9px 4px;text-align:center;min-width:0;
  border:none;background:var(--surface);color:inherit;
  font-family:inherit;cursor:pointer;
  transition:background .2s;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;
}
.tot:not(:last-child){border-right:1px solid var(--border)}
.tot:not(:disabled):hover{background:var(--surface2)}
.tot:not(:disabled):active{transform:scale(.97)}
.tot:disabled{opacity:.4;cursor:default}
.tot-l{font-size:8.5px;color:var(--text);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tot-c{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:var(--text);opacity:.7;line-height:1.2}
.tot-v{font-family:'JetBrains Mono',monospace;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.tot-active{background:var(--surface2);position:relative}
.tot-active::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:currentColor;opacity:.5;
}
.tot-active .tot-l{color:var(--text);font-weight:600}
.tot-active .tot-c{color:var(--text);opacity:1}

/* ── Tarjetas de acción ──────────────────────────────────────────
   Bloque de opciones grandes y claras que aparece dentro del empty
   state cuando no hay asientos: empezar nuevo, cargar archivo, etc. */
.action-cards{
  display:grid;gap:12px;width:100%;max-width:420px;
  margin:24px auto 0;
}
.action-card{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);
  cursor:pointer;text-align:left;
  font-family:'DM Sans',sans-serif;color:var(--text);
  transition:transform .12s,border-color .15s,background .15s;
}
.action-card:hover{border-color:var(--action);background:var(--surface2)}
.action-card:active{transform:scale(.98)}
.action-card-icon{
  flex-shrink:0;width:42px;height:42px;border-radius:10px;
  background:var(--action);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  box-shadow:0 2px 10px var(--action-shadow);
}
.action-card-text{flex:1;min-width:0}
.action-card-title{font-size:14px;font-weight:600;margin-bottom:2px;color:var(--text)}
.action-card-desc{font-size:11.5px;color:var(--text-muted);line-height:1.4}

/* ── Tarjeta de asiento (item del listado) ── */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;
  cursor:pointer;transition:transform .1s,border-color .15s;
  position:relative;overflow:hidden;
  animation:fadeUp .22s ease both;
}
@media (hover:hover){.card:hover{border-color:var(--border-hi)}}
.card::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px}
.card:active{transform:scale(.98)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.card-desc{font-size:15px;font-weight:500;flex:1;line-height:1.35}
.card-price{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:600;white-space:nowrap}
.card-tax{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;
  color:var(--text-muted);margin-top:2px;text-align:right;
  white-space:nowrap;font-weight:700;
}
.card-tax-label{margin-right:6px}
.card-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px;align-items:center}
.meta-item{font-size:12px;color:var(--text-muted)}
.badge{font-size:10px;padding:2px 8px;border-radius:20px;font-weight:600;text-transform:uppercase;letter-spacing:.6px}

/* ── Selección múltiple ── */
/* Checkbox visual: círculo en la esquina superior derecha de la tarjeta */
.card-check{
  position:absolute;top:12px;right:12px;z-index:2;
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--border-hi);background:var(--bg);
  display:none;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s;
  flex-shrink:0;
}
.selecting .card-check{display:flex}
.selecting .card{padding-right:44px}
.card.selected{border-color:var(--action);background:var(--surface2)}
.card.selected .card-check{background:var(--action);border-color:var(--action)}
.card.selected .card-check::after{
  content:'';width:6px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:translateY(-1px) rotate(45deg);
}
/* Botón seleccionar activo */
.action-btn-secondary.active{background:var(--action);color:#fff;border-color:var(--action)}
.footer-btn.active{background:var(--action);color:#fff;border-color:var(--action)}
/* Botón "Acciones" del footer: icono + texto */
#select-btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:6px;line-height:1;
}
#select-btn-icon{font-size:14px;line-height:1}
#select-btn-label{font-size:inherit;font-weight:inherit}
/* Barra flotante inferior con acciones masivas */
#bulk-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--surface2);border-top:1px solid var(--border-hi);
  padding:10px 14px env(safe-area-inset-bottom,10px);
  display:none;align-items:center;gap:8px;
  box-shadow:0 -8px 24px rgba(0,0,0,0.35);
  animation:slideUpBulk .22s ease;
}
#bulk-bar.show{display:flex}
#bulk-bar .bulk-count{
  flex:1;min-width:0;font-size:13px;font-weight:600;
  color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bulk-btn{
  height:36px;padding:0 14px;border-radius:8px;
  border:1px solid var(--border-hi);background:var(--surface);
  color:var(--text);font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:500;cursor:pointer;
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.bulk-btn:hover{background:var(--bg);border-color:var(--text-muted)}
.bulk-btn.danger{color:var(--danger);border-color:rgba(239,68,68,0.3)}
.bulk-btn.danger:hover{background:rgba(239,68,68,0.08);border-color:var(--danger)}
/* Menú desplegable "Cambiar estado" — aparece encima del botón */
.bulk-state-wrap{position:relative}
#bulk-state-menu{
  position:absolute;bottom:calc(100% + 8px);left:0;
  background:var(--surface);border:1px solid var(--border-hi);
  border-radius:10px;padding:6px;display:none;
  flex-direction:column;gap:2px;min-width:170px;
  box-shadow:0 8px 24px rgba(0,0,0,0.45);
  z-index:51;
}
#bulk-state-menu.show{display:flex}
#bulk-state-menu button{
  background:transparent;border:none;color:var(--text);
  padding:9px 12px;border-radius:6px;text-align:left;
  font-family:'DM Sans',sans-serif;font-size:13px;cursor:pointer;
  display:flex;align-items:center;gap:8px;
}
#bulk-state-menu button:hover{background:var(--surface2)}

/* ── Autocomplete clientes ── */
.autocomplete-wrap{position:relative}
.ac-dropdown{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:5;
  background:var(--surface2);border:1px solid var(--border-hi);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  max-height:240px;overflow-y:auto;
  display:none;
  animation:fadeUp .15s ease both;
}
.ac-dropdown.show{display:block}
.ac-item{
  padding:10px 14px;cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--border);transition:background .12s;
}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.active{background:var(--surface)}
.ac-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-name mark{background:transparent;color:var(--amber);font-weight:600}
.ac-count{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--text-muted);background:var(--bg);
  padding:2px 7px;border-radius:10px;flex-shrink:0;
}
.ac-empty{padding:14px;text-align:center;font-size:12px;color:var(--text-muted)}
.ac-manage{
  padding:9px 14px;font-size:12px;text-align:center;
  background:var(--bg);color:var(--amber);cursor:pointer;
  border-top:1px solid var(--border);font-weight:500;
  transition:background .12s;
}
.ac-manage:hover{background:var(--surface)}

/* ── Gestión de clientes ── */
.client-row{
  display:flex;align-items:center;gap:10px;padding:12px 0;
  border-bottom:1px solid var(--border);
}
.client-row:last-child{border-bottom:none}
.client-name{flex:1;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.client-stats{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);background:var(--surface2);padding:3px 8px;border-radius:10px}
.client-actions{display:flex;gap:4px}
.client-btn{
  background:none;border:1px solid var(--border);
  padding:5px 9px;border-radius:6px;cursor:pointer;
  color:var(--text-muted);font-size:12px;font-family:'DM Sans',sans-serif;
  transition:all .15s;
}
.client-btn:hover{border-color:var(--border-hi);color:var(--text)}
.client-btn.danger:hover{border-color:var(--warn);color:var(--warn)}

/* ── Action row (botones bajo el título) ── */
.action-row{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;
}
/* Todos los botones del header (Añadir, Guardar, Cerrar, Backup) comparten
   el mismo aspecto mediante .action-btn-secondary. */
.action-btn-secondary{
  flex:1;min-width:0;height:38px;padding:0 12px;border-radius:9px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text);
  font-size:12px;font-weight:500;font-family:'DM Sans',sans-serif;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:border-color .15s,color .15s,background .15s;
}
.action-btn-secondary:hover{border-color:var(--border-hi);color:var(--text);background:var(--surface2)}
/* Estado deshabilitado: usado por Añadir/Guardar/Cerrar cuando no aplican.
   Color --text al 40% de opacidad (mismo aspecto que el footer inactivo). */
.action-btn-secondary:disabled{
  opacity:.4;cursor:default;
}
.action-btn-secondary:disabled:hover{
  border-color:var(--border);color:var(--text);background:var(--surface);
}

/* ── Overlay / Sheets (modales) ── */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);
  z-index:30;display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.overlay.open{opacity:1;pointer-events:all}
.sheet{
  width:100%;max-width:480px;max-height:94dvh;overflow-y:auto;
  background:var(--surface);border-radius:20px 20px 0 0;
  padding:0 20px 50px;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.33,1,.68,1);
}
.overlay.open .sheet{transform:translateY(0)}
.sheet-sticky{
  position:sticky;top:0;background:var(--surface);
  padding-top:16px;padding-bottom:16px;z-index:1;
  border-bottom:1px solid var(--border);margin-bottom:20px;
}
.handle{width:40px;height:4px;background:var(--border);border-radius:2px;margin:0 auto 16px}
.sheet-title{font-family:'DM Sans',sans-serif;font-size:22px;font-weight:700}

/* ── Formularios ── */
.fg{margin-bottom:16px}

/* Fila de la etiqueta "Precio (€)" + separador ↺ + switch "Gratis"
   (en la misma línea, encima del input de precio). */
.precio-label-row{
  display:flex;align-items:center;gap:8px;margin-bottom:6px;
}
.precio-label-row label{margin-bottom:0}
.precio-label-row .sep{flex-shrink:0}
.precio-label-row .switch-noremun{
  display:flex;align-items:center;gap:7px;flex-shrink:0;
  cursor:pointer;user-select:none;
  font-size:12px;color:var(--text-muted);
  font-weight:400;
  text-transform:none;
  letter-spacing:normal;
  margin-bottom:0;
}
.switch-noremun input{
  position:absolute;opacity:0;pointer-events:none;width:0;height:0;
}
.switch-slider{
  position:relative;width:30px;height:17px;flex-shrink:0;
  background:var(--surface2);
  border:1px solid var(--border);border-radius:10px;
  transition:background .2s,border-color .2s;
}
.switch-slider::before{
  content:'';position:absolute;left:2px;top:2px;
  width:11px;height:11px;background:var(--text-muted);
  border-radius:50%;transition:transform .2s,background .2s;
}
.switch-noremun input:checked + .switch-slider{
  background:var(--noremunerado-dim);
  border-color:var(--noremunerado);
}
.switch-noremun input:checked + .switch-slider::before{
  transform:translateX(13px);
  background:var(--noremunerado);
}
.switch-noremun input:checked ~ .switch-label{
  color:var(--noremunerado);
}
.switch-noremun input:focus-visible + .switch-slider{
  box-shadow:0 0 0 2px var(--action-shadow);
}

/* Inputs precio e impuesto deshabilitados (estado "Gratis" activo):
   fondo transparente y texto muted. -webkit-text-fill-color necesario
   porque iOS Safari sobreescribe color en inputs disabled. */
#f-precio:disabled,
#f-imp:disabled{
  background:transparent;
  color:var(--border);
  -webkit-text-fill-color:var(--border);
}

/* Botones de estado deshabilitados (al activar el switch Gratis):
   texto en color --border para que se vea claramente que no son
   interactuables. */
.etog:disabled{color:var(--border)}

/* Etiquetas de los campos afectados por el switch Gratis activado:
   "Precio (€)", "Impuesto (%)" y "Estado" heredan el color --border
   para mantener la coherencia visual con sus campos deshabilitados.
   La clase .noremun-on la añade toggleNoRemunerado() al activarse. */
#overlay.noremun-on label[for="f-precio"],
#overlay.noremun-on label[for="f-imp"],
#overlay.noremun-on #label-estado{
  color:var(--border);
}

.fg label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1.1px;color:var(--text);margin-bottom:6px;font-weight:500}
input[type=text],input[type=date],input[type=number],select,textarea{
  width:100%;background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;color:var(--text);font-family:'DM Sans',sans-serif;
  font-size:15px;padding:12px 14px;outline:none;
  transition:border-color .18s;-webkit-appearance:none;appearance:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--amber)}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.6);cursor:pointer}
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}

/* ── Selector de estado (toggle grid) ── */
.estado-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.etog{
  padding:10px 12px;border-radius:8px;border:1px solid var(--border);
  background:transparent;color:var(--text-muted);font-family:'DM Sans',sans-serif;
  font-size:13px;font-weight:500;cursor:pointer;transition:all .18s;text-align:left;
  display:flex;align-items:center;gap:7px;
}

/* ── Secciones y campos personalizados ── */
.divider{border:none;border-top:1px solid var(--border);margin:20px 0}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.section-label{font-size:11px;text-transform:uppercase;letter-spacing:1.1px;color:var(--text);font-weight:500}
.link-btn{font-size:12px;padding:8px 14px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--amber);cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:500;min-height:44px;display:flex;align-items:center;justify-content:center}
.field-item{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border)}
.field-item:last-child{border-bottom:none}
.fi-name{flex:1;font-size:14px}
.fi-type{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-muted);background:var(--surface2);padding:2px 7px;border-radius:4px}
.fi-del{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;line-height:1;padding:2px 4px;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}
.add-field-box{background:var(--surface2);border-radius:10px;padding:14px;margin-bottom:14px;display:none}

/* ── Botones del formulario (Guardar / Cancelar / Borrar) ── */
.btn-row{display:flex;gap:8px;margin-top:24px}
.btn-save{flex:1;padding:14px;border-radius:10px;border:none;background:var(--action);color:#fff;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;cursor:pointer}
.btn-cancel{padding:14px 18px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font-family:'DM Sans',sans-serif;font-size:15px;cursor:pointer}
.btn-del{padding:14px 16px;border-radius:10px;border:1px solid rgba(239,68,68,.3);background:transparent;color:var(--danger);font-family:'DM Sans',sans-serif;font-size:15px;cursor:pointer}

/* ── Banner instalación PWA ── */
#banner{display:none;background:var(--surface2);border-top:1px solid var(--action);padding:12px 20px;align-items:center;gap:12px}
#banner.show{display:flex}
#banner p{flex:1;font-size:13px;color:var(--text);line-height:1.4}
#banner strong{color:var(--text)}
.btn-install{background:var(--action);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:'DM Sans',sans-serif}
.btn-close-banner{background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}

/* ── Banner de actualización (aparece arriba, prioridad visual) ── */
#update-banner{
  display:none;position:fixed;top:0;left:0;right:0;z-index:50;
  background:var(--surface2);
  border-bottom:1px solid var(--cobrado);
  padding:12px 20px;align-items:center;gap:12px;
  max-width:480px;margin:0 auto;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  animation:slideDown .3s ease;
}
#update-banner.show{display:flex}
#update-banner p{flex:1;font-size:13px;color:var(--text);line-height:1.4}
#update-banner strong{color:var(--cobrado)}

/* ── Aviso de nueva versión SW: aparece abajo, el usuario elige cuándo recargar ── */
#sw-update-notice{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:var(--surface2);border-top:1px solid var(--border-hi);
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  gap:12px;align-items:center;
  max-width:480px;margin:0 auto;
  box-shadow:0 -8px 24px rgba(0,0,0,0.4);
  animation:slideUp .3s ease;
}
#sw-update-notice.show{display:flex}
#sw-update-notice p{flex:1;font-size:13px;color:var(--text);line-height:1.4}
#sw-update-notice strong{color:var(--amber)}
#sw-update-notice .sw-btns{display:flex;gap:8px;flex-shrink:0}
#sw-update-notice .btn-sw-confirm{background:var(--action);color:#fff;border:none;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap}
#sw-update-notice .btn-sw-dismiss{background:none;border:1px solid var(--border-hi);color:var(--text);border-radius:8px;padding:8px 14px;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;white-space:nowrap}

/* ── Desplegable filtro mes/año ── */
.month-year-dropdown{
  position:fixed;bottom:70px;left:50%;transform:translateX(-50%);
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:12px;display:none;z-index:45;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  width:90%;max-width:240px;
}
.month-year-dropdown.open{display:flex;flex-direction:column;gap:10px}
.my-row{display:flex;gap:10px;align-items:center;justify-content:space-between}
.my-row label{font-size:12px;font-weight:500;min-width:40px}
.my-select{
  flex:1;padding:8px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:12px;
  cursor:pointer;
}
.my-select:hover{border-color:var(--border-hi)}
.my-btn-clear{
  padding:8px 12px;border-radius:6px;border:none;
  background:var(--action);color:#fff;font-size:12px;font-weight:500;
  cursor:pointer;align-self:center;
}
.my-btn-clear:hover{opacity:.9}

/* ── Lista de opciones del modal close-confirm (contenedor flex) ── */
.onboarding-options{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}

/* ── Tutorial interactivo (paso a paso) ── */
.tut-progress{
  display:flex;align-items:center;gap:10px;
  margin-bottom:16px;font-size:11px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:1px;font-weight:500;
}
.tut-progress-bar{
  flex:1;height:4px;background:var(--surface2);border-radius:2px;overflow:hidden;
}
.tut-progress-fill{
  height:100%;background:var(--action);border-radius:2px;
  transition:width .3s ease;
}
.tut-step{display:none}
.tut-step.active{display:block;animation:fadeIn .25s ease}
.tut-step-icon{
  font-size:38px;text-align:center;margin-bottom:10px;
}
.tut-step-title{
  font-size:18px;font-weight:600;color:var(--text);
  text-align:center;margin-bottom:10px;
}
.tut-step-content{
  font-size:14px;color:var(--text-muted);line-height:1.6;
  margin-bottom:18px;
}
.tut-step-content strong{color:var(--text);font-weight:600}
.tut-tip{
  background:var(--surface2);border-radius:8px;padding:12px;
  font-size:13px;color:var(--text-muted);line-height:1.5;
  margin-bottom:16px;border-left:3px solid var(--action);
}
.tut-tip strong{color:var(--text)}
.tut-nav{
  display:flex;gap:8px;margin-top:20px;
}
.tut-btn{
  flex:1;padding:12px;border-radius:8px;
  font-size:14px;font-weight:500;
  border:1px solid var(--border);background:var(--surface2);
  color:var(--text);cursor:pointer;
}
.tut-btn:hover{border-color:var(--border-hi);background:var(--surface)}
.tut-btn:disabled{opacity:.4;cursor:default}
.tut-example{
  background:var(--surface2);border-radius:8px;padding:12px;
  margin-bottom:14px;font-size:13px;color:var(--text-muted);
  border:1px dashed var(--border);
}
.tut-example strong{color:var(--action)}
.tut-list{
  list-style:none;padding:0;margin:0 0 14px 0;
}
.tut-list li{
  padding:8px 0;border-bottom:1px solid var(--border);
  font-size:13px;color:var(--text-muted);line-height:1.4;
  display:flex;gap:8px;align-items:flex-start;
}
.tut-list li:last-child{border-bottom:none}
.tut-list li::before{
  content:"";color:var(--action);font-weight:bold;flex-shrink:0;
}

/* ── Banner Safari/iOS (aviso de limitaciones) ── */
#safari-banner{
  display:none;position:fixed;top:0;left:0;right:0;z-index:49;
  background:var(--surface2);
  border-bottom:1px solid var(--amber);
  padding:12px 20px;align-items:center;gap:12px;
  max-width:480px;margin:0 auto;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  animation:slideDown .3s ease;
}
#safari-banner.show{display:flex}
#safari-banner p{flex:1;font-size:13px;color:var(--text);line-height:1.4}
#safari-banner strong{color:var(--amber)}
#safari-banner .btn-install{background:var(--amber);color:#000}

/* ─────────────────────────────────────────────────────────────────────
   HOVER GLOW EN PANTALLA PRINCIPAL (solo dispositivos con ratón)
   ─────────────────────────────────────────────────────────────────────
   Efecto sutil al pasar el ratón sobre los botones activos del header,
   barra de totales y footer. Cada botón se ilumina con un glow del
   color que le es propio (violeta acción, verde cobrado, etc.).

   Diseñado solo para escritorio (@media hover:hover excluye móviles
   y tablets táctiles, donde el "hover" sticky generaría falsos brillos
   tras tocar un botón).

   Sólo aplica a botones :not(:disabled): si está deshabilitado no
   reacciona, refuerza la sensación de que no es interactivo.
   ───────────────────────────────────────────────────────────────────── */
@media (hover: hover) {
  /* Transición suave para todos los botones afectados */
  .action-btn-secondary,
  .tot,
  .footer-btn {
    transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
  }

  /* ── Botones del header (Añadir/Guardar/Cerrar): glow neutro ──── */
  /* Todos comparten el mismo aspecto desde v128. Brillo cálido sutil. */
  .action-btn-secondary:not(:disabled):hover {
    box-shadow: 0 0 12px -2px rgba(237, 232, 227, 0.18);
    border-color: var(--border-hi);
  }

  /* ── Botones de totales por estado (cada uno con su color) ─────── */
  .tot[data-f="todos"]:not(:disabled):hover {
    box-shadow: inset 0 0 12px -4px rgba(237, 232, 227, 0.25);
  }
  .tot[data-f="cobrado"]:not(:disabled):hover {
    box-shadow: inset 0 0 14px -3px var(--cobrado);
  }
  .tot[data-f="facturada"]:not(:disabled):hover {
    box-shadow: inset 0 0 14px -3px var(--facturada);
  }
  .tot[data-f="enb"]:not(:disabled):hover {
    box-shadow: inset 0 0 14px -3px var(--enb);
  }
  .tot[data-f="espera"]:not(:disabled):hover {
    box-shadow: inset 0 0 14px -3px var(--espera);
  }
  .tot[data-f="noremunerado"]:not(:disabled):hover {
    box-shadow: inset 0 0 14px -3px var(--noremunerado);
  }

  /* ── Botones del footer (Deshacer/Acciones/Mes-Año/Instrucciones) ── */
  /* Glow neutro sutil; estos botones no representan estados de color */
  .footer-btn:not(:disabled):hover {
    box-shadow: 0 0 12px -2px rgba(237, 232, 227, 0.18);
    border-color: var(--border-hi);
  }
}


/* ── Modal cap-openfile: tarjetas de archivo en la lista ────────────
   Cada archivo en el modal de "Fichero existente" se renderiza como un
   botón clicable con dos líneas: nombre y metadatos (fecha + tamaño).
   El estilo coincide visualmente con .action-btn-secondary pero ajustado
   para mostrar contenido en dos líneas y permitir hover. */
.cap-openfile-item {
  display: block;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.cap-openfile-item:hover {
  border-color: var(--border-hi);
  background: var(--surface2);
}
.cap-openfile-item:last-child { margin-bottom: 0; }
.cap-openfile-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  word-break: break-all;
}
.cap-openfile-meta {
  font-size: 12px;
  color: var(--text-muted);
}