/* ============================================================================
   styles.css — El diseño de la app (modo oscuro, parecido a Microsoft To Do).
   Pensado para iPhone y para Mac (se acomoda solo según el tamaño).
   ============================================================================ */

/* ---- Colores y medidas en un solo lugar (fácil de cambiar después) ---- */
:root {
  --negro:        #000000;
  --panel:        #0b0b0d;   /* barra lateral en la computadora */
  --texto:        #f4f5f7;
  --texto-2:      rgba(255, 255, 255, 0.55);
  --texto-3:      rgba(255, 255, 255, 0.38);
  --tarjeta:      rgba(22, 22, 26, 0.72);  /* las tarjetas de tarea (vidrio oscuro) */
  --tarjeta-hover:rgba(36, 36, 42, 0.82);
  --borde:        rgba(255, 255, 255, 0.10);
  --divisor:      rgba(255, 255, 255, 0.09);
  --estrella:     #f2c14e;
  --barra-ancho:  300px;
  --detalle-ancho:380px;
  /* Zonas seguras del iPhone (notch / barra de inicio) */
  --sa-top:    env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--negro);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font-family: inherit; color: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

/* Layout general: barra | principal | detalle (en la computadora, lado a lado) */
.app {
  display: grid;
  grid-template-columns: var(--barra-ancho) 1fr 0;
  height: 100%;
  transition: grid-template-columns 0.2s ease;
}
body.detalle-visible .app {
  grid-template-columns: var(--barra-ancho) 1fr var(--detalle-ancho);
}

/* ============================================================================
   BARRA LATERAL (las listas)
   ============================================================================ */
.barra {
  background: var(--panel);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  padding-top: var(--sa-top);
  overflow: hidden;
}

.barra-cabecera {
  padding: 18px 20px 10px;
}
.marca { display: flex; align-items: center; gap: 10px; }
.marca-icono {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #7a5230, #3a2817);
  border-radius: 50%;
  font-size: 18px;
}
.marca-texto { font-weight: 700; font-size: 16px; letter-spacing: 0.2px; }

.listas { flex: 1; overflow-y: auto; padding: 6px 10px; }

.fila-lista {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  text-align: left;
  font-size: 16px;
}
.fila-lista:hover { background: rgba(255, 255, 255, 0.05); }
.fila-lista.activa { background: rgba(255, 255, 255, 0.1); }
.fila-icono { width: 24px; height: 24px; display: grid; place-items: center; flex: none; }
.fila-icono svg { width: 22px; height: 22px; }
.fila-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-cuenta { color: var(--texto-2); font-size: 15px; min-width: 18px; text-align: right; }

/* colores de los íconos de las listas fijas */
.ico-midia     { color: #e6c15a; }
.ico-importante{ color: #f2a9bb; }
.ico-planeado  { color: #79d0c6; }
.ico-tareas    { color: #7aa7f0; }
.ico-lista     { color: var(--texto-2); }

.separador { height: 1px; background: var(--divisor); margin: 8px 14px; }

.nueva-lista {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 22px calc(16px + var(--sa-bottom));
  background: transparent; border: none;
  border-top: 1px solid var(--borde);
  color: var(--texto-2); font-size: 16px;
}
.nueva-lista span { font-size: 22px; line-height: 1; }
.nueva-lista:hover { color: var(--texto); }

/* ============================================================================
   PRINCIPAL (las tareas de la lista elegida)
   ============================================================================ */
.principal {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background-color: #10151d;
  background-size: cover;
  background-position: center;
}
/* Capa oscura suave para que el texto y las tarjetas se lean siempre bien */
.principal::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 70% 20%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
}

/* Barra de arriba: volver (solo celular) | título chico (al hacer scroll) | opciones */
.top-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center;
  gap: 8px;
  padding: calc(10px + var(--sa-top)) 14px 10px;
  min-height: 52px;
}
.boton-volver {
  display: none; /* en la computadora no hace falta */
  align-items: center; gap: 2px;
  background: transparent; border: none;
  color: #fff; font-size: 18px; padding: 6px 6px 6px 0;
}
.boton-volver .flecha { font-size: 24px; line-height: 1; }
.titulo-chico {
  flex: 1; text-align: center;
  font-size: 17px; font-weight: 700;
  opacity: 0; transition: opacity 0.15s ease;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.principal.scrolled .titulo-chico { opacity: 1; }
.acciones { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.boton-opciones {
  background: transparent; border: none; color: #fff;
  font-size: 22px; width: 40px; height: 40px; border-radius: 50%;
}
.boton-opciones:hover { background: rgba(255,255,255,0.12); }

/* Zona que hace scroll (título grande + tarjetas) */
.scroll {
  position: relative; z-index: 1;
  flex: 1; overflow-y: auto;
  padding: 0 14px 14px;
  -webkit-overflow-scrolling: touch;
}
.titulo-grande {
  margin: 4px 6px 14px;
  font-size: 34px; font-weight: 800; letter-spacing: 0.3px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}

.tareas { display: flex; flex-direction: column; gap: 9px; max-width: 760px; }

.vacio { color: rgba(255,255,255,0.7); padding: 30px 6px; text-align: center; }

/* ---- Tarjeta de tarea ---- */
.tarea {
  display: flex; align-items: center; gap: 14px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 15px 16px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.tarea:hover { background: var(--tarjeta-hover); }

.circulo {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  background: transparent; color: transparent;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700;
}
.tarea.completa .circulo,
.circulo.ok {
  background: rgba(255,255,255,0.35);
  border-color: transparent; color: #0b0b0d;
}

.tarea-centro { flex: 1; min-width: 0; }
.tarea-texto { font-size: 16px; line-height: 1.35; word-break: break-word; }
.tarea.completa .tarea-texto { text-decoration: line-through; color: var(--texto-2); }
.tarea-meta { margin-top: 5px; font-size: 13px; color: var(--texto-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.estrella {
  flex: none; background: transparent; border: none;
  color: rgba(255,255,255,0.5); font-size: 22px; line-height: 1;
  width: 36px; height: 36px; border-radius: 50%;
}
.estrella.activa { color: var(--estrella); }
.estrella:hover { background: rgba(255,255,255,0.1); }

/* ---- Sección "Completado" plegable ---- */
.cab-completado {
  align-self: flex-start;
  display: flex; align-items: center; gap: 10px;
  margin: 14px 2px 4px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 8px 14px; font-size: 15px; font-weight: 600;
}
.cab-completado .chevron { font-size: 14px; }
.cab-completado .cab-cuenta { color: var(--texto-2); font-weight: 400; }

/* ---- Caja de "Agregar una tarea" (abajo) ---- */
.composer {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  margin: 10px 14px calc(14px + var(--sa-bottom));
  background: rgba(30,30,34,0.92);
  border: 1px solid var(--borde);
  border-radius: 14px;
  padding: 15px 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.composer-mas { font-size: 22px; color: var(--texto-2); line-height: 1; }
.composer-input {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--texto); font-size: 16px;
}
.composer-input::placeholder { color: var(--texto-2); }

/* ============================================================================
   DETALLE DE LA TAREA
   ============================================================================ */
.detalle {
  background: #1a1a1d;
  border-left: 1px solid var(--borde);
  overflow-y: auto;
  padding-top: var(--sa-top);
}
body:not(.detalle-visible) .detalle { display: none; }

#detalle:empty { display: none; }

/* Barra de arriba del detalle: "‹ Volver" en el celular, "✕" en la compu */
.det-barra { display: flex; justify-content: flex-end; padding: 10px 14px 0; }
.det-volver { display: none !important; }
.det-cerrar-x {
  background: transparent; border: none; color: var(--texto-2);
  font-size: 18px; width: 36px; height: 36px; border-radius: 50%;
}
.det-cerrar-x:hover { background: rgba(255,255,255,0.1); color: var(--texto); }
.det-volver {
  display: inline-flex; align-items: center; gap: 2px;
  background: transparent; border: none; color: var(--texto-2); font-size: 17px;
  padding: 6px 0;
}
.det-volver .flecha { font-size: 24px; line-height: 1; }

.det-top {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px 16px;
}
.det-opcion .di { display: inline-flex; }
.det-opcion .di svg { width: 20px; height: 20px; }
.det-creada { color: var(--texto-3); font-size: 13px; }
.det-borrar svg { width: 22px; height: 22px; display: block; }
.det-top .circulo { margin-top: 3px; }
.det-texto {
  flex: 1; background: transparent; border: none; outline: none;
  color: var(--texto); font-size: 20px; font-weight: 700; line-height: 1.3;
  resize: none; overflow: hidden; padding: 0; display: block;
}
.det-top .estrella { margin-top: -4px; }

.det-opcion {
  width: calc(100% - 36px);
  margin: 0 18px 8px;
  display: flex; align-items: center; gap: 12px;
  background: #242428; border: 1px solid var(--borde);
  border-radius: 10px; padding: 14px 16px;
  color: var(--texto-2); font-size: 16px; text-align: left;
}
.det-opcion.activa { color: var(--texto); }
.det-opcion .quitar { margin-left: auto; color: var(--texto-3); font-size: 14px; }

.det-campo {
  margin: 0 18px 8px;
  background: #242428; border: 1px solid var(--borde);
  border-radius: 10px; padding: 14px 16px;
}
.det-label { display: block; color: var(--texto-2); font-size: 14px; margin-bottom: 10px; }
.det-fecha {
  background: transparent; border: none; outline: none;
  color: var(--texto); font-size: 16px; color-scheme: dark;
}
.det-nota {
  width: 100%; background: transparent; border: none; outline: none; resize: vertical;
  color: var(--texto); font-size: 16px; line-height: 1.4;
}
.det-nota::placeholder { color: var(--texto-3); }

/* Botones rápidos "Agregar a…" */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--borde);
  border-radius: 999px;
  padding: 8px 14px; font-size: 14px; color: var(--texto-2);
}
.chip.activo {
  background: rgba(122,167,240,0.22);
  border-color: rgba(122,167,240,0.55);
  color: #cfe0ff;
}
.chip:hover { border-color: rgba(255,255,255,0.3); }

.det-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 18px; margin-top: 10px;
  border-top: 1px solid var(--borde);
  position: sticky; bottom: 0; background: #1a1a1d;
  padding-bottom: calc(18px + var(--sa-bottom));
}
.det-cerrar {
  background: transparent; border: 1px solid var(--borde);
  border-radius: 10px; padding: 10px 18px; color: var(--texto); font-size: 15px;
}
.det-borrar {
  background: transparent; border: none; color: #f1879a; font-size: 15px;
}

/* ============================================================================
   RESPONSIVE — en el iPhone se ve una pantalla por vez
   ============================================================================ */
@media (max-width: 820px) {
  .app, body.detalle-visible .app {
    grid-template-columns: 1fr;  /* una sola columna */
  }
  .barra, .principal, .detalle {
    grid-column: 1;
    grid-row: 1;
  }
  .barra { border-right: none; }
  .fila-lista.activa { background: transparent; } /* en el inicio no se resalta ninguna */
  .boton-volver { display: flex; }

  /* Mostramos solo la pantalla activa según data-pantalla */
  .barra     { display: none; }
  .principal { display: none; }
  .detalle   { display: none; }

  body[data-pantalla="barra"]    .barra     { display: flex; }
  body[data-pantalla="lista"]    .principal { display: flex; }
  body[data-pantalla="detalle"]  .detalle   { display: block; }

  /* En el celular: "‹ Volver" a la izquierda, sin la ✕ */
  .det-barra { justify-content: flex-start; }
  .det-volver { display: inline-flex !important; }
  .det-cerrar-x { display: none; }

  .titulo-grande { font-size: 30px; }
}

/* Pantallas medianas (ventana chica de la Mac, iPad): el detalle flota
   por encima en vez de achicar la lista. */
@media (min-width: 821px) and (max-width: 1150px) {
  body.detalle-visible .app { grid-template-columns: var(--barra-ancho) 1fr 0; }
  .detalle {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: var(--detalle-ancho); max-width: 90vw; z-index: 20;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55);
  }
}

/* ============================================================================
   FONDO DE LAS LISTAS: facetas oscuras tipo 3D (img/fondo.svg), igual en todas.
   ============================================================================ */
.principal {
  background-color: #0a0a0c;
  background-image: none;
}
/* La imagen va en una capa aparte para poder difuminarla (como la opción
   "Difuminar" del fondo de inicio del iPhone). Se agranda un poco para que
   el difuminado no deje bordes claros. */
.principal::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/fondo.svg") center / cover no-repeat;
  filter: blur(3px) brightness(1.1);
  transform: scale(1.03);
  pointer-events: none;
}

/* ============================================================================
   CAPA FUTURISTA — neón cian/violeta, brillos y animaciones.
   Todo lo "vistoso" está acá abajo: si algo molesta, se ajusta en esta parte.
   ============================================================================ */
:root {
  --neon:      #2ee6ff;
  --neon-2:    #b26bff;
  --neon-grad: linear-gradient(135deg, var(--neon), var(--neon-2));
  --glow:      0 0 14px rgba(46, 230, 255, 0.45);
  --suave:     cubic-bezier(0.2, 0.8, 0.2, 1);      /* movimiento elegante */
  --rebote:    cubic-bezier(0.34, 1.56, 0.64, 1);   /* movimiento con rebote */
}

::selection { background: rgba(46, 230, 255, 0.35); }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }

/* Todos los botones responden al toque (se achican apenas al apretar) */
button {
  transition: transform 0.15s var(--suave), background-color 0.2s, color 0.2s,
              box-shadow 0.25s, border-color 0.2s, opacity 0.2s;
}
button:active { transform: scale(0.96); }

/* Barras de scroll finitas */
.scroll::-webkit-scrollbar, .listas::-webkit-scrollbar, .detalle::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb, .listas::-webkit-scrollbar-thumb, .detalle::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12); border-radius: 8px;
}
.scroll::-webkit-scrollbar-thumb:hover { background: rgba(46, 230, 255, 0.4); }

/* ---------------- Barra lateral ---------------- */
.barra {
  background: linear-gradient(180deg, #0d0e12 0%, #08080a 100%);
  border-right: 1px solid rgba(46, 230, 255, 0.08);
}
.marca-icono {
  box-shadow: 0 0 0 1.5px rgba(46, 230, 255, 0.55), 0 0 18px rgba(46, 230, 255, 0.3);
}
.marca-texto {
  background: linear-gradient(90deg, #fff 0%, #fff 40%, var(--neon) 55%, var(--neon-2) 65%, #fff 80%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: brillo-marca 7s linear infinite;
}
@keyframes brillo-marca { from { background-position: 100% 0; } to { background-position: -150% 0; } }

.fila-lista { position: relative; transition: background-color 0.2s, transform 0.25s var(--suave); }
.fila-lista::before {           /* rayita neón de la lista activa */
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 0; border-radius: 3px;
  background: var(--neon-grad); box-shadow: var(--glow);
  transform: translateY(-50%); transition: height 0.3s var(--suave);
}
.fila-lista.activa {
  background: linear-gradient(90deg, rgba(46, 230, 255, 0.13), rgba(178, 107, 255, 0.03));
}
.fila-lista.activa::before { height: 60%; }
.fila-lista.activa .fila-nombre { color: #fff; font-weight: 600; }
.fila-lista.activa .fila-icono { filter: drop-shadow(0 0 6px currentColor); }
.fila-lista.activa .fila-cuenta { color: var(--neon); }
.fila-icono svg { transition: transform 0.3s var(--rebote); }

.nueva-lista span { display: inline-block; transition: transform 0.35s var(--rebote), text-shadow 0.25s; }

/* ---------------- Zona central ---------------- */
.top-bar { transition: background-color 0.3s, backdrop-filter 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; }
.principal.scrolled .top-bar {
  background: rgba(10, 10, 14, 0.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.titulo-grande::after {         /* línea neón debajo del título */
  content: ""; display: block;
  width: 56px; height: 3px; margin-top: 10px; border-radius: 3px;
  background: var(--neon-grad); box-shadow: var(--glow);
}
.principal.cambio-lista .titulo-grande { animation: titulo-entra 0.5s var(--suave) backwards; }
.principal.cambio-lista .titulo-grande::after { animation: linea-entra 0.7s 0.12s var(--suave) backwards; }
@keyframes titulo-entra { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } }
@keyframes linea-entra  { from { width: 0; opacity: 0; } }

/* Tarjetas */
.tarea { position: relative; transition: transform 0.25s var(--suave), box-shadow 0.3s, border-color 0.3s, background-color 0.3s; }
.tarea-centro { cursor: pointer; }
.principal.cambio-lista .tarea {
  animation: tarea-entra 0.45s var(--suave) backwards;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes tarea-entra { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

.tarea.nueva { animation: tarea-nueva 0.7s var(--rebote) backwards; }
@keyframes tarea-nueva {
  0%   { opacity: 0; transform: translateY(18px) scale(0.95);
         box-shadow: 0 0 0 1px rgba(46,230,255,0.7), 0 0 34px rgba(46,230,255,0.55); }
  55%  { opacity: 1; box-shadow: 0 0 0 1px rgba(46,230,255,0.6), 0 0 26px rgba(46,230,255,0.35); }
}

/* Círculo de completar */
.circulo { position: relative; transition: border-color 0.2s, background 0.25s, box-shadow 0.25s, color 0.2s; }
.circulo svg { width: 15px; height: 15px; }
.tarea.completa .circulo, .circulo.ok {
  background: var(--neon-grad); border-color: transparent; color: #06121a;
  box-shadow: 0 0 10px rgba(46, 230, 255, 0.3);
}
.tarea.completa { opacity: 0.7; }
.tarea.completa .tarea-texto { text-decoration-color: rgba(46, 230, 255, 0.6); }

/* El momento "¡hecho!" */
.tarea.completando { animation: tarea-sale 0.42s 0.2s ease-in forwards; }
.tarea.completando .circulo {
  background: var(--neon-grad); border-color: transparent; color: #06121a;
  animation: check-pop 0.45s var(--rebote);
  box-shadow: 0 0 18px rgba(46, 230, 255, 0.7);
}
.tarea.completando .circulo::after {  /* onda de luz */
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--neon); animation: onda 0.55s ease-out forwards;
}
.tarea.completando .tarea-texto {
  color: var(--texto-2); text-decoration: line-through; text-decoration-color: var(--neon);
  transition: color 0.3s;
}
@keyframes check-pop  { 0% { transform: scale(0.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes onda       { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.3); opacity: 0; } }
@keyframes tarea-sale { to { opacity: 0; transform: translateX(26px) scale(0.98); } }

/* Estrella */
.estrella svg { width: 22px; height: 22px; display: block; margin: auto; transition: transform 0.3s var(--rebote); }
.estrella.activa { filter: drop-shadow(0 0 6px rgba(242, 193, 78, 0.55)); }
.estrella.pop svg { animation: estrella-pop 0.55s var(--rebote); }
@keyframes estrella-pop {
  0% { transform: scale(0.4) rotate(-40deg); } 60% { transform: scale(1.35) rotate(12deg); } 100% { transform: scale(1) rotate(0); }
}

/* "Completado" */
.cab-completado { transition: border-color 0.2s, background-color 0.2s, box-shadow 0.25s; }

/* Campo "Agregar una tarea" */
.composer { transition: box-shadow 0.3s, border-color 0.3s, background-color 0.3s; }
.composer:focus-within {
  border-color: rgba(46, 230, 255, 0.55);
  background: rgba(14, 18, 24, 0.94);
  box-shadow: 0 0 0 1px rgba(46, 230, 255, 0.2), 0 0 30px rgba(46, 230, 255, 0.18), 0 12px 30px rgba(0, 0, 0, 0.4);
}
.composer-mas { display: inline-block; transition: transform 0.4s var(--rebote), color 0.25s, text-shadow 0.25s; }
.composer:focus-within .composer-mas { color: var(--neon); transform: rotate(90deg); text-shadow: var(--glow); }
.composer-input, .det-texto, .det-nota, .det-fecha { caret-color: var(--neon); }

/* ---------------- Detalle ---------------- */
.detalle { background: #111216; border-left: 1px solid rgba(46, 230, 255, 0.12); }
.det-pie { background: #111216; }
.det-opcion, .det-campo { background: #1a1b21; transition: border-color 0.25s, background-color 0.25s, box-shadow 0.3s, color 0.2s; }
.det-campo:focus-within {
  border-color: rgba(46, 230, 255, 0.5);
  box-shadow: 0 0 0 1px rgba(46, 230, 255, 0.15), 0 0 22px rgba(46, 230, 255, 0.12);
}
.det-opcion.activa { color: var(--neon); border-color: rgba(46, 230, 255, 0.4); background: rgba(46, 230, 255, 0.07); }
.det-opcion .di svg { transition: transform 0.7s var(--suave); }

.detalle.abriendo > * { animation: det-entra 0.4s var(--suave) backwards; }
.detalle.abriendo > *:nth-child(2) { animation-delay: 0.04s; }
.detalle.abriendo > *:nth-child(3) { animation-delay: 0.08s; }
.detalle.abriendo > *:nth-child(4) { animation-delay: 0.12s; }
.detalle.abriendo > *:nth-child(5) { animation-delay: 0.16s; }
.detalle.abriendo > *:nth-child(6) { animation-delay: 0.20s; }
.detalle.abriendo > *:nth-child(7) { animation-delay: 0.24s; }
@keyframes det-entra { from { opacity: 0; transform: translateX(18px); } }

/* Botones rápidos "Agregar a…" */
.chip { transition: transform 0.25s var(--rebote), background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.3s; }
.chip.activo {
  background: linear-gradient(135deg, rgba(46, 230, 255, 0.22), rgba(178, 107, 255, 0.22));
  border-color: rgba(46, 230, 255, 0.7); color: #fff;
  box-shadow: 0 0 14px rgba(46, 230, 255, 0.28);
}
.chip.activo::before { content: "✓ "; color: var(--neon); font-weight: 700; }
.chip.pop { animation: chip-pop 0.4s var(--rebote); }
@keyframes chip-pop { 0% { transform: scale(0.85); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }

.det-borrar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
}

/* ---------------- Efectos al pasar el cursor (solo Mac / con mouse) ---------------- */
@media (hover: hover) {
  .fila-lista:hover { background: rgba(255, 255, 255, 0.06); transform: translateX(3px); }
  .fila-lista.activa:hover { background: linear-gradient(90deg, rgba(46, 230, 255, 0.17), rgba(178, 107, 255, 0.05)); }
  .fila-lista:hover .fila-icono svg { transform: scale(1.15); }

  .nueva-lista:hover { color: var(--neon); }
  .nueva-lista:hover span { transform: rotate(90deg); text-shadow: var(--glow); }

  .tarea:hover {
    transform: translateY(-2px);
    border-color: rgba(46, 230, 255, 0.35);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(46, 230, 255, 0.1), 0 0 24px rgba(46, 230, 255, 0.12);
  }
  .tarea:not(.completa):not(.completando) .circulo:hover {
    border-color: var(--neon); color: var(--neon); box-shadow: var(--glow);
  }
  .estrella:hover { color: var(--estrella); }
  .estrella:hover svg { transform: scale(1.18) rotate(-8deg); }

  .cab-completado:hover { border-color: rgba(46, 230, 255, 0.4); box-shadow: 0 0 16px rgba(46, 230, 255, 0.15); }
  .composer:hover:not(:focus-within) { border-color: rgba(255, 255, 255, 0.2); }
  .boton-opciones:hover, .det-cerrar-x:hover { box-shadow: 0 0 14px rgba(46, 230, 255, 0.25); color: var(--neon); }

  .det-opcion:hover { border-color: rgba(46, 230, 255, 0.3); color: var(--texto); }
  .det-opcion:hover .di svg { transform: rotate(90deg); }
  .det-campo:hover:not(:focus-within) { border-color: rgba(255, 255, 255, 0.16); }
  .chip:hover { transform: translateY(-2px); border-color: rgba(46, 230, 255, 0.5); color: #fff; }
  .det-borrar:hover { background: rgba(255, 80, 110, 0.12); color: #ff6b86; box-shadow: 0 0 16px rgba(255, 80, 110, 0.35); }
}

/* ---------------- iPhone: pantallas que se deslizan ---------------- */
@media (max-width: 820px) {
  /* en el inicio no se resalta ninguna lista */
  .fila-lista.activa { background: transparent; }
  .fila-lista.activa::before { height: 0; }
  .fila-lista.activa .fila-nombre { font-weight: 400; }
  .fila-lista.activa .fila-icono { filter: none; }
  .fila-lista.activa .fila-cuenta { color: var(--texto-2); }
  .fila-lista:active { background: rgba(46, 230, 255, 0.1); }

}

/* Si el iPhone/Mac tiene activado "Reducir movimiento", apagamos animaciones */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}

/* Los campos de texto ya brillan con su caja: sin el contorno extra del navegador */
.composer-input:focus-visible, .det-texto:focus-visible,
.det-nota:focus-visible, .det-fecha:focus-visible { outline: none; }

/* ============================================================================
   EMOJI DE LA LISTA + CAMBIAR NOMBRE TOCANDO EL TÍTULO
   ============================================================================ */
.fila-emoji { font-size: 19px; line-height: 1; }

.titulo-zona {
  position: relative;
  display: flex; align-items: flex-start;
  margin: 4px 6px 14px;
}
.titulo-zona .titulo-grande { margin: 0; outline: none; min-width: 40px; }

/* Nombre editable: se marca suave al pasar el cursor */
.titulo-grande.editable {
  padding: 0 10px; margin-left: -10px;
  border-radius: 12px; cursor: text;
  transition: background-color 0.2s, box-shadow 0.25s;
}
.emoji-btn:not(.vacio) + .titulo-grande.editable { margin-left: 0; }
.titulo-grande[contenteditable="true"] {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(46, 230, 255, 0.55), 0 0 22px rgba(46, 230, 255, 0.18);
  caret-color: var(--neon);
}
.titulo-grande.guardado { animation: guardado 0.7s ease-out; }
@keyframes guardado {
  from { box-shadow: inset 0 0 0 1px rgba(46, 230, 255, 0.8), 0 0 30px rgba(46, 230, 255, 0.45); }
}

/* Botón del emoji */
.emoji-btn {
  flex: none;
  width: 46px; height: 42px; padding: 0; margin-right: 2px;
  display: grid; place-items: center;
  font-size: 30px; line-height: 1;
  background: transparent;
  border: 1.5px dashed transparent; border-radius: 12px;
  overflow: hidden; color: var(--texto-2);
  transition: width 0.3s var(--suave), opacity 0.25s, margin 0.3s var(--suave),
              background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.25s, transform 0.2s;
}
.emoji-btn[hidden] { display: none; }
.emoji-btn svg { width: 22px; height: 22px; }
.emoji-btn.pop { animation: chip-pop 0.45s var(--rebote); }

/* Sin emoji: escondido hasta que acercás el cursor (o editás el título) */
.emoji-btn.vacio { width: 0; opacity: 0; margin-right: 0; }
.titulo-zona.editando .emoji-btn.vacio,
.titulo-zona.eligiendo .emoji-btn.vacio {
  width: 42px; opacity: 1; margin-right: 10px;
  border-color: rgba(255, 255, 255, 0.28);
}

@media (hover: hover) {
  .titulo-zona:hover .emoji-btn.vacio {
    width: 42px; opacity: 1; margin-right: 10px;
    border-color: rgba(255, 255, 255, 0.28);
  }
  .emoji-btn:hover { background: rgba(255, 255, 255, 0.07); }
  .emoji-btn.vacio:hover { border-color: var(--neon); color: var(--neon); box-shadow: var(--glow); }
  .titulo-grande.editable:not([contenteditable="true"]):hover {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}

/* Panel de emojis */
.selector-emoji {
  position: absolute; top: 52px; left: 0; z-index: 30;
  width: 310px; max-width: calc(100vw - 40px);
  padding: 12px;
  background: rgba(18, 19, 24, 0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(46, 230, 255, 0.25); border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(46, 230, 255, 0.12);
  transform-origin: top left;
  animation: panel-entra 0.28s var(--rebote);
}
.selector-emoji[hidden] { display: none; }
@keyframes panel-entra { from { opacity: 0; transform: scale(0.92) translateY(-6px); } }

.sel-titulo {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--texto-2); margin: 2px 4px 8px;
}
.sel-grilla { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.sel-emoji {
  aspect-ratio: 1; padding: 0;
  display: grid; place-items: center;
  font-size: 21px; line-height: 1;
  background: transparent; border: none; border-radius: 9px;
  animation: emoji-entra 0.3s var(--suave) backwards;
  animation-delay: calc(var(--i, 0) * 6ms);
}
.sel-emoji.actual { background: rgba(46, 230, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(46, 230, 255, 0.6); }
@keyframes emoji-entra { from { opacity: 0; transform: scale(0.6); } }

.sel-pie { display: flex; gap: 8px; margin-top: 10px; }
.sel-otro {
  flex: 1; min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--borde); border-radius: 10px;
  padding: 8px 10px; color: var(--texto);
  font-size: 16px; /* 16px evita que el iPhone haga zoom */
  outline: none; caret-color: var(--neon);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sel-otro:focus { border-color: rgba(46, 230, 255, 0.6); box-shadow: 0 0 14px rgba(46, 230, 255, 0.18); }
.sel-otro::placeholder { color: var(--texto-3); }
.sel-quitar {
  background: transparent; border: 1px solid var(--borde); border-radius: 10px;
  padding: 8px 12px; color: var(--texto-2); font-size: 13px;
}
@media (hover: hover) {
  .sel-emoji:hover { background: rgba(46, 230, 255, 0.14); transform: scale(1.2); }
  .sel-quitar:hover { color: #ff6b86; border-color: rgba(255, 80, 110, 0.4); }
}
.fila-lista.activa .fila-emoji { filter: none; }

/* ============================================================================
   TÍTULO CON MÁS "DOPAMINA" + SEPARACIÓN DEL EMOJI
   ============================================================================ */

/* Aire entre el emoji y el recuadro del título */
.emoji-btn:not(.vacio) { margin-right: 12px; }
.titulo-zona.editando .emoji-btn.vacio,
.titulo-zona.eligiendo .emoji-btn.vacio { margin-right: 22px; }

/* El cuadradito aparece con borde neón y la carita saluda */
.titulo-zona.editando .emoji-btn.vacio,
.titulo-zona.eligiendo .emoji-btn.vacio {
  border-color: rgba(46, 230, 255, 0.55);
  color: var(--neon);
  background: rgba(46, 230, 255, 0.05);
  box-shadow: 0 0 14px rgba(46, 230, 255, 0.22), inset 0 0 12px rgba(46, 230, 255, 0.08);
}
@keyframes saludo {
  0% { transform: rotate(0); } 30% { transform: rotate(-16deg) scale(1.1); }
  60% { transform: rotate(10deg); } 100% { transform: rotate(0); }
}

/* Título editable: reflejo de luz y línea que se estira */
.titulo-grande.editable { position: relative; overflow: hidden; }
.titulo-grande.editable::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%);
  transform: translateX(-120%);
}
.titulo-grande::after { transition: width 0.45s var(--suave), box-shadow 0.3s; }
@keyframes barrido { from { transform: translateX(-120%); } to { transform: translateX(120%); } }


@media (hover: hover) {
  .titulo-zona:hover .emoji-btn.vacio {
    margin-right: 22px;
    border-color: rgba(46, 230, 255, 0.55);
    color: var(--neon);
    background: rgba(46, 230, 255, 0.05);
    box-shadow: 0 0 14px rgba(46, 230, 255, 0.22), inset 0 0 12px rgba(46, 230, 255, 0.08);
  }
  .titulo-zona:hover .emoji-btn.vacio svg { animation: saludo 0.7s var(--rebote) 0.12s; }
  .emoji-btn.vacio:hover {
    border-style: solid; transform: scale(1.08) rotate(-4deg);
    background: rgba(46, 230, 255, 0.12);
    box-shadow: 0 0 22px rgba(46, 230, 255, 0.45), inset 0 0 14px rgba(46, 230, 255, 0.15);
  }
  .emoji-btn:not(.vacio):hover {
    background: transparent;
    transform: scale(1.14) rotate(-6deg);
    filter: drop-shadow(0 0 10px rgba(46, 230, 255, 0.55));
  }

  .titulo-grande.editable:not([contenteditable="true"]):hover {
    background: linear-gradient(135deg, rgba(46, 230, 255, 0.09), rgba(178, 107, 255, 0.10));
    box-shadow: inset 0 0 0 1px rgba(46, 230, 255, 0.42),
                0 0 26px rgba(46, 230, 255, 0.16), 0 0 50px rgba(178, 107, 255, 0.08);
    text-shadow: 0 0 20px rgba(46, 230, 255, 0.35);
  }
  .titulo-grande.editable:not([contenteditable="true"]):hover::before { animation: barrido 0.9s var(--suave); }
  .titulo-zona:hover .titulo-grande.editable::after {
    width: 100%;
    box-shadow: 0 0 16px rgba(46, 230, 255, 0.6);
  }
}


/* ============================================================================
   RECUADRO DEL TÍTULO: misma altura que el emoji, sin tocar la línea neón.
   El recuadro es una capa (::before) que cubre solo el texto; la línea de
   abajo (::after) queda afuera, separada.
   ============================================================================ */
.titulo-zona .titulo-grande { line-height: 42px; }   /* igual que el cuadradito del emoji */
.titulo-grande.editable { isolation: isolate; overflow: visible; }

/* El h1 en sí ya no se pinta: lo pinta su capa */
.titulo-grande.editable,
.titulo-grande[contenteditable="true"] { background: none; box-shadow: none; }

.titulo-grande.editable::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; right: 0; top: 0;
  height: calc(100% - 13px);          /* todo menos la línea (3px) y su espacio (10px) */
  border-radius: 12px;
  transform: none;
  opacity: 0;
  background:
    linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.16) 50%, transparent 65%) no-repeat,
    linear-gradient(135deg, rgba(46, 230, 255, 0.09), rgba(178, 107, 255, 0.10));
  background-size: 250% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  transition: opacity 0.3s, box-shadow 0.3s;
}
@keyframes brillo-titulo {
  from { background-position: 150% 0, 0 0; }
  to   { background-position: -50% 0, 0 0; }
}

/* Editando: recuadro con borde neón */
.titulo-grande[contenteditable="true"]::before {
  opacity: 1;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(46, 230, 255, 0.55), 0 0 22px rgba(46, 230, 255, 0.18);
}

/* Destello de "guardado" */
.titulo-grande.guardado { animation: none; }
.titulo-grande.guardado::before { animation: guardado-caja 0.8s ease-out; }
@keyframes guardado-caja {
  from { opacity: 1; box-shadow: inset 0 0 0 1px rgba(46, 230, 255, 0.85), 0 0 30px rgba(46, 230, 255, 0.45); }
  to   { opacity: 0; }
}

@media (hover: hover) {
  .titulo-grande.editable:not([contenteditable="true"]):hover { background: none; box-shadow: none; }
  .titulo-grande.editable:not([contenteditable="true"]):hover::before {
    opacity: 1;
    box-shadow: inset 0 0 0 1px rgba(46, 230, 255, 0.42),
                0 0 26px rgba(46, 230, 255, 0.16), 0 0 50px rgba(178, 107, 255, 0.08);
    animation: brillo-titulo 0.9s var(--suave);
  }
}

/* ============================================================================
   PEDIDOS — ícono del apartado, tarjeta con resumen y ficha completa
   ============================================================================ */
.ico-pedidos { color: var(--neon); filter: drop-shadow(0 0 6px rgba(46, 230, 255, 0.6)); }
.fila-lista .ico-pedidos svg { width: 22px; height: 22px; }

/* --- Tarjeta del pedido --- */
.tarea.pedido { align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
.tarea.pedido .circulo, .tarea.pedido .estrella { margin-top: 1px; }
.tarea.pedido .estrella { margin-top: -5px; }

.ped-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ped-cliente { font-size: 16.5px; font-weight: 650; letter-spacing: 0.1px; }
.ped-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 6px;
  color: #06121a; background: var(--neon-grad);
  box-shadow: 0 0 10px rgba(46, 230, 255, 0.35);
}
.ped-piezas {
  margin-top: 5px; font-size: 14px; color: rgba(255, 255, 255, 0.82);
  line-height: 1.4;
}
.ped-datos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ped-dato {
  font-size: 12.5px; color: var(--texto-2);
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
}
.ped-dato.falta  { color: #ffc27a; background: rgba(255, 170, 70, 0.10); border-color: rgba(255, 170, 70, 0.28); }
.ped-dato.pagado { color: #6ff2ae; background: rgba(60, 230, 140, 0.10); border-color: rgba(60, 230, 140, 0.28); }
.ped-dato.lista  { color: #cfe0ff; border-color: rgba(46, 230, 255, 0.25); }
.tarea.completa .ped-cliente { text-decoration: line-through; text-decoration-color: rgba(46, 230, 255, 0.6); color: var(--texto-2); }

/* --- Ficha del pedido --- */
.campo-input {
  width: 100%; min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--borde); border-radius: 9px;
  padding: 9px 11px;
  color: var(--texto); font-size: 15px; outline: none;
  caret-color: var(--neon);
  transition: border-color 0.2s, box-shadow 0.25s, background-color 0.2s;
}
.campo-input::placeholder { color: var(--texto-3); }
.campo-input:focus {
  border-color: rgba(46, 230, 255, 0.6);
  background: rgba(46, 230, 255, 0.05);
  box-shadow: 0 0 14px rgba(46, 230, 255, 0.16);
}

.piezas { display: flex; flex-direction: column; gap: 10px; }
.pieza {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; border-radius: 11px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  animation: det-entra 0.3s var(--suave) backwards;
}
.pieza-medidas { display: flex; align-items: center; gap: 6px; }
.pieza-num  { flex: 1; text-align: center; }
.pieza-cant { width: 62px; flex: none; text-align: center; }
.pieza-x { color: var(--neon); font-weight: 700; text-shadow: var(--glow); }
.pieza-quitar {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: transparent; border: none; color: var(--texto-3); font-size: 13px;
}
.pieza-agregar {
  margin-top: 10px; width: 100%;
  background: transparent;
  border: 1.5px dashed rgba(46, 230, 255, 0.35); border-radius: 10px;
  padding: 10px; color: var(--neon); font-size: 14px; font-weight: 600;
}

.cobro { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cobro-caja { display: flex; flex-direction: column; gap: 5px; }
.cobro-titulo { font-size: 12px; color: var(--texto-3); letter-spacing: 0.04em; }
.cobro-resultado {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 650; text-align: center;
  color: var(--texto-3); background: rgba(255, 255, 255, 0.04);
  transition: color 0.25s, background-color 0.25s, box-shadow 0.3s;
}
.cobro-resultado.falta  { color: #ffc27a; background: rgba(255, 170, 70, 0.10); box-shadow: inset 0 0 0 1px rgba(255, 170, 70, 0.3); }
.cobro-resultado.pagado { color: #6ff2ae; background: rgba(60, 230, 140, 0.10); box-shadow: inset 0 0 0 1px rgba(60, 230, 140, 0.3), 0 0 18px rgba(60, 230, 140, 0.15); }

@media (hover: hover) {
  .pieza-quitar:hover { color: #ff6b86; background: rgba(255, 80, 110, 0.12); }
  .pieza-agregar:hover {
    border-style: solid; background: rgba(46, 230, 255, 0.08);
    box-shadow: 0 0 18px rgba(46, 230, 255, 0.2);
  }
  .campo-input:hover:not(:focus) { border-color: rgba(255, 255, 255, 0.18); }
}

/* En el iPhone: 16px en los campos para que no haga zoom al tocarlos */
@media (max-width: 820px) {
  .campo-input { font-size: 16px; }
}

/* ============================================================================
   BOTÓN DE WHATSAPP (ficha y tarjeta del pedido)
   ============================================================================ */
.fila-tel { display: flex; gap: 8px; align-items: center; }
.ficha-wpp {
  flex: none; width: 44px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  color: #fff; background: linear-gradient(135deg, #2bdc76, #12a85a);
  box-shadow: 0 0 16px rgba(37, 211, 102, 0.35);
  transition: transform 0.2s var(--rebote), box-shadow 0.25s, opacity 0.25s, filter 0.25s;
}
.ficha-wpp svg { width: 22px; height: 22px; }
.ficha-wpp.apagado {
  opacity: 0.35; filter: grayscale(1); box-shadow: none; pointer-events: none;
}
.ficha-wpp:active { transform: scale(0.94); }

.ped-wpp {
  display: inline-grid; place-items: center;
  width: 26px; height: 24px; border-radius: 999px;
  color: #3fe38a; background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.35);
  transition: transform 0.2s var(--rebote), box-shadow 0.25s, background-color 0.2s;
}
.ped-wpp svg { width: 14px; height: 14px; }

@media (hover: hover) {
  .ficha-wpp:not(.apagado):hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 0 26px rgba(37, 211, 102, 0.6); }
  .ped-wpp:hover { transform: scale(1.15); background: rgba(37, 211, 102, 0.22); box-shadow: 0 0 14px rgba(37, 211, 102, 0.5); }
}

/* ============================================================================
   TIPO DE PIEZA: tres botones + "Estilo" para Enmarcado
   ============================================================================ */
.pieza-tipos {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  padding: 4px; border-radius: 11px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.pieza-tipo-btn {
  min-height: 38px; padding: 6px 6px;
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  color: var(--texto-2); font-size: 13px; font-weight: 600; line-height: 1.2;
  transition: background-color 0.25s, color 0.2s, border-color 0.25s, box-shadow 0.3s, transform 0.2s var(--rebote);
}
.pieza-tipo-btn.activo {
  color: #fff;
  background: linear-gradient(135deg, rgba(46, 230, 255, 0.24), rgba(178, 107, 255, 0.24));
  border-color: rgba(46, 230, 255, 0.65);
  box-shadow: 0 0 14px rgba(46, 230, 255, 0.28);
  animation: chip-pop 0.35s var(--rebote);
}

/* "Estilo": se despliega suave cuando elegís Enmarcado */
.pieza-estilo {
  display: grid; grid-template-rows: 0fr;
  opacity: 0; margin-top: -6px;
  transition: grid-template-rows 0.3s var(--suave), opacity 0.25s, margin-top 0.3s var(--suave);
}
.pieza-estilo > * { min-height: 0; overflow: hidden; }
.pieza-estilo.visible { grid-template-rows: 1fr; opacity: 1; margin-top: 0; }
.pieza-estilo .campo-input { border-color: rgba(178, 107, 255, 0.35); }

@media (hover: hover) {
  .pieza-tipo-btn:not(.activo):hover { color: #fff; background: rgba(255, 255, 255, 0.06); transform: translateY(-1px); }
}
.pieza-estilo.visible > * { overflow: visible; }

/* Piezas en la tarjeta: una por renglón, con rayita neón a la izquierda */
.ped-piezas { display: flex; flex-direction: column; gap: 5px; margin-top: 7px; }
.ped-pieza {
  position: relative;
  padding-left: 12px;
  line-height: 1.35;
}
.ped-pieza::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 2.5px; border-radius: 2px;
  background: linear-gradient(180deg, var(--neon), var(--neon-2));
  box-shadow: 0 0 8px rgba(46, 230, 255, 0.55);
}

/* Chip de un día donde el pedido ya está hecho: "Viernes ✓" */
.ped-dato.lista.hecho { color: #6ff2ae; border-color: rgba(60, 230, 140, 0.35); background: rgba(60, 230, 140, 0.08); }

/* ============================================================================
   COBRO: Pendiente · Seña · Pagado (cada uno con su color)
   ============================================================================ */
.pago-estados { margin-top: 10px; }
.pago-estados .pieza-tipo-btn { min-height: 36px; font-size: 14px; }
.pago-estados .pago-pendiente.activo {
  background: rgba(255, 170, 70, 0.16); border-color: rgba(255, 170, 70, 0.6);
  color: #ffc27a; box-shadow: 0 0 14px rgba(255, 170, 70, 0.25);
}
.pago-estados .pago-pagado.activo {
  background: rgba(60, 230, 140, 0.16); border-color: rgba(60, 230, 140, 0.6);
  color: #6ff2ae; box-shadow: 0 0 14px rgba(60, 230, 140, 0.28);
}
/* (Seña usa el neón cian/violeta de siempre) */
.pago-estados + .pieza-estilo.visible { margin-top: 10px; }

.cobro-resultado.sena {
  color: #cfe9ff;
  background: linear-gradient(135deg, rgba(46, 230, 255, 0.10), rgba(178, 107, 255, 0.10));
  box-shadow: inset 0 0 0 1px rgba(46, 230, 255, 0.35);
}
.ped-dato.sena { color: #cfe9ff; background: rgba(46, 230, 255, 0.08); border-color: rgba(46, 230, 255, 0.3); }

/* ============================================================================
   ARRASTRAR PARA ORDENAR
   ============================================================================ */
.tarea { padding-left: 24px; }
.agarradera {
  position: absolute; left: 0; top: 0; bottom: 0; width: 24px;
  display: grid; place-items: center;
  color: var(--texto-3);
  cursor: grab;
  touch-action: none;           /* en el iPhone: arrastra la tarjeta, no la pantalla */
  opacity: 0;
  transition: opacity 0.2s, color 0.2s;
}
.agarradera svg { width: 14px; height: 14px; }

@media (hover: hover) {
  .tarea:hover .agarradera { opacity: 1; }
  .agarradera:hover { color: var(--neon); filter: drop-shadow(0 0 6px rgba(46, 230, 255, 0.6)); }
}
@media (hover: none) {
  .agarradera { opacity: 0.45; }  /* en el celular se ve siempre, tenue */
}

/* La tarjeta mientras la arrastrás: flota con brillo */
.tarea.arrastrando {
  position: fixed; z-index: 1000; margin: 0;
  pointer-events: none; user-select: none; -webkit-user-select: none;
  transform: scale(1.03) rotate(0.6deg);
  border-color: rgba(46, 230, 255, 0.6);
  background: rgba(24, 26, 32, 0.92);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(46, 230, 255, 0.3), 0 0 30px rgba(46, 230, 255, 0.3);
  transition: none;
  animation: none;
}
.tarea.arrastrando .agarradera { opacity: 1; color: var(--neon); }

/* Hueco donde va a caer */
.tarea-hueco {
  border-radius: 14px;
  border: 1.5px dashed rgba(46, 230, 255, 0.55);
  background: rgba(46, 230, 255, 0.05);
  box-shadow: inset 0 0 20px rgba(46, 230, 255, 0.08);
}

/* Destello al soltar */
.tarea.soltada { animation: soltada 0.6s var(--suave); }
@keyframes soltada {
  from { box-shadow: 0 0 0 1px rgba(46, 230, 255, 0.7), 0 0 30px rgba(46, 230, 255, 0.45); }
}

/* ============================================================================
   TACHITO ROJO AL LADO DE "ENTREGADOS" / "COMPLETADO"
   ============================================================================ */
.fila-completado { display: flex; align-items: center; gap: 8px; margin: 14px 2px 4px; }
.fila-completado .cab-completado { margin: 0; }
.borrar-completadas {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  color: #ff6b86;
  opacity: 0; transform: translateX(-6px) scale(0.9);
  transition: opacity 0.2s, transform 0.3s var(--rebote), background-color 0.2s, box-shadow 0.25s, border-color 0.2s;
}
.borrar-completadas svg { width: 18px; height: 18px; }

@media (hover: hover) {
  .fila-completado:hover .borrar-completadas { opacity: 1; transform: none; }
  .borrar-completadas:hover {
    background: rgba(255, 80, 110, 0.14);
    border-color: rgba(255, 80, 110, 0.45);
    box-shadow: 0 0 18px rgba(255, 80, 110, 0.45);
  }
  .borrar-completadas:hover svg { animation: tacho-sacude 0.4s ease-in-out; }
}
@media (hover: none) {
  .borrar-completadas { opacity: 0.6; transform: none; }  /* en el celular se ve siempre */
}
@keyframes tacho-sacude {
  0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); }
}

/* Las terminadas se van con una animación al borrarlas */
.tarea.borrando { animation: borrando 0.35s ease-in forwards; }
@keyframes borrando { to { opacity: 0; transform: translateX(30px) scale(0.96); filter: blur(2px); } }

/* La zona del título mide lo mismo que el título (y el emoji): el cursor solo
   la "activa" cuando está arriba de la palabra, no en todo el ancho. */
.titulo-zona { width: fit-content; max-width: 100%; }

/* ============================================================================
   ENMARCADOS
   ============================================================================ */
.ico-enmarcados { color: var(--neon-2); filter: drop-shadow(0 0 6px rgba(178, 107, 255, 0.6)); }
.ped-pieza.atenuada { opacity: 0.4; }
.ped-pieza.atenuada::before { background: rgba(255, 255, 255, 0.35); box-shadow: none; }

/* ============================================================================
   PRECIOS: precio por pieza + total automático
   ============================================================================ */
.pieza-precio { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pieza-precio-titulo { font-size: 12px; color: var(--texto-3); letter-spacing: 0.04em; }
.pieza-precio-input { width: 110px; flex: none; text-align: right; }
.pieza-aviso {
  font-size: 12px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
}
.pieza-aviso.lista  { color: #6ff2ae; background: rgba(60, 230, 140, 0.10); border-color: rgba(60, 230, 140, 0.3); }
.pieza-aviso.mano   { color: var(--texto-3); background: rgba(255, 255, 255, 0.04); }
.pieza-aviso.fuera  { color: #ffc27a; background: rgba(255, 170, 70, 0.10); border-color: rgba(255, 170, 70, 0.3); }
.pieza-aviso.volver {
  cursor: pointer; color: var(--neon);
  background: rgba(46, 230, 255, 0.08); border-color: rgba(46, 230, 255, 0.35);
}

.total-aviso { margin-top: 6px; font-size: 12.5px; color: var(--texto-3); min-height: 4px; }
.total-aviso.lista { color: #6ff2ae; }
.total-volver {
  background: transparent; border: none; padding: 0;
  color: var(--neon); font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px;
}
@media (hover: hover) {
  .pieza-aviso.volver:hover { box-shadow: 0 0 12px rgba(46, 230, 255, 0.35); }
  .total-volver:hover { text-shadow: var(--glow); }
}
.total-aviso.fuera { color: #ffc27a; }

/* Aviso del respaldo (debajo del nombre, en la barra de listas) */
.estado-respaldo { margin: 8px 0 0 44px; font-size: 11.5px; color: var(--texto-3); min-height: 14px; }
.estado-respaldo.ok { color: rgba(111, 242, 174, 0.75); }
.estado-respaldo.error { color: #ffc27a; }

/* ============================================================================
   NUBE: pantalla de entrada + aviso de sincronización
   ============================================================================ */
.estado-nube { margin: 8px 0 0 44px; font-size: 11.5px; color: var(--texto-3); min-height: 14px; }
.estado-nube.ok { color: rgba(46, 230, 255, 0.8); }
.estado-nube.error { color: #ffc27a; }
.estado-nube + .estado-respaldo { margin-top: 2px; }

.entrada {
  position: fixed; inset: 0; z-index: 5000;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(46, 230, 255, 0.10), transparent 60%),
    rgba(6, 7, 10, 0.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.entrada[hidden] { display: none; }
.entrada-caja {
  width: 100%; max-width: 380px; text-align: center;
  padding: 32px 26px;
  background: rgba(20, 21, 27, 0.92);
  border: 1px solid rgba(46, 230, 255, 0.25); border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(46, 230, 255, 0.12);
  animation: panel-entra 0.4s var(--rebote);
}
.entrada-logo {
  width: 64px; height: 64px; margin: 0 auto 14px; font-size: 32px;
  display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(145deg, #7a5230, #3a2817);
  box-shadow: 0 0 0 2px rgba(46, 230, 255, 0.5), 0 0 26px rgba(46, 230, 255, 0.35);
}
.entrada-titulo {
  margin: 0 0 10px; font-size: 22px; font-weight: 800;
  background: linear-gradient(90deg, #fff, var(--neon), var(--neon-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.entrada-texto { color: var(--texto-2); font-size: 15px; line-height: 1.45; margin: 0 0 18px; }
.entrada-texto b { color: var(--texto); }
.entrada-input {
  width: 100%; padding: 14px 16px; margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--borde); border-radius: 12px;
  color: var(--texto); font-size: 17px; outline: none; caret-color: var(--neon);
  transition: border-color 0.2s, box-shadow 0.25s;
}
.entrada-input:focus { border-color: rgba(46, 230, 255, 0.6); box-shadow: 0 0 18px rgba(46, 230, 255, 0.2); }
.entrada-codigo { text-align: center; font-size: 28px; letter-spacing: 0.35em; font-weight: 700; }
.entrada-boton {
  width: 100%; padding: 14px; border: none; border-radius: 12px;
  font-size: 16px; font-weight: 700; color: #06121a;
  background: var(--neon-grad);
  box-shadow: 0 0 22px rgba(46, 230, 255, 0.35);
}
.entrada-boton:disabled { opacity: 0.55; }
.entrada-link {
  margin-top: 14px; background: transparent; border: none;
  color: var(--texto-2); font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px;
}
.entrada-mensaje { min-height: 20px; margin: 14px 0 0; font-size: 14px; color: var(--texto-2); }
.entrada-mensaje.error { color: #ff8fa3; }


/* ============================================================================
   CELULAR: transiciones entre pantallas (como las apps del iPhone)
   La que entra se desliza desde la derecha; la anterior se corre un poco
   y se oscurece. Al volver, al revés.
   ============================================================================ */
@media (max-width: 820px) {
  .app { position: relative; overflow: hidden; }
  .barra.saliendo, .principal.saliendo { display: flex; }
  .detalle.saliendo { display: block; }

  .entrando-adelante { z-index: 3; animation: entra-adelante 0.42s cubic-bezier(0.32, 0.72, 0, 1) both; box-shadow: -14px 0 40px rgba(0, 0, 0, 0.55); }
  .saliendo-adelante { z-index: 1; animation: sale-adelante 0.42s cubic-bezier(0.32, 0.72, 0, 1) both; pointer-events: none; }
  .entrando-atras    { z-index: 1; animation: entra-atras 0.42s cubic-bezier(0.32, 0.72, 0, 1) both; }
  .saliendo-atras    { z-index: 3; animation: sale-atras 0.42s cubic-bezier(0.32, 0.72, 0, 1) both; pointer-events: none; box-shadow: -14px 0 40px rgba(0, 0, 0, 0.55); }

  /* En el celular el detalle entra entero, sin el escalonado de la compu */
  .detalle.abriendo > * { animation: none; }

  /* Sin transparencia en el campo de agregar: en el iPhone evita que el cursor aparezca corrido */
  .composer { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(22, 24, 30, 0.97); }
}
@keyframes entra-adelante { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes sale-adelante  { from { transform: translateX(0); filter: brightness(1); } to { transform: translateX(-28%); filter: brightness(0.55); } }
@keyframes entra-atras    { from { transform: translateX(-28%); filter: brightness(0.55); } to { transform: translateX(0); filter: brightness(1); } }
@keyframes sale-atras     { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* ============================================================================
   FECHA: recuadro neón con "dd / mm / aaaa" cuando está vacía
   ============================================================================ */
.fecha-caja {
  position: relative; display: flex; align-items: center;
  min-height: 48px; padding: 0 12px 0 14px;
  border: 1px solid rgba(46, 230, 255, 0.35); border-radius: 12px;
  background: rgba(46, 230, 255, 0.04);
  box-shadow: 0 0 12px rgba(46, 230, 255, 0.08);
  transition: border-color 0.2s, box-shadow 0.25s, background-color 0.2s;
}
.fecha-caja:focus-within {
  border-color: rgba(46, 230, 255, 0.75);
  box-shadow: 0 0 20px rgba(46, 230, 255, 0.25);
}
.fecha-caja .det-fecha {
  flex: 1; width: 100%; min-width: 0; height: 46px;
  background: transparent; border: none; outline: none;
  color: var(--texto); font-size: 16px; text-align: left;
  -webkit-appearance: none; appearance: none; color-scheme: dark;
}
.fecha-caja .det-fecha::-webkit-date-and-time-value { text-align: left; }
.fecha-caja .det-fecha::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.55); cursor: pointer; }
/* Vacía: escondemos lo que muestra el navegador y ponemos nuestro "dd / mm / aaaa" */
.fecha-caja:not(.con-fecha) .det-fecha { color: transparent; }
.fecha-caja:not(.con-fecha):focus-within .det-fecha { color: var(--texto); }
.fecha-vacia {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--texto-3); letter-spacing: 0.06em; font-size: 16px; pointer-events: none;
}
.fecha-caja.con-fecha .fecha-vacia,
.fecha-caja:focus-within .fecha-vacia { display: none; }
.fecha-borrar {
  display: none; flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: transparent; border: none; color: var(--texto-3); font-size: 13px;
}
.fecha-caja.con-fecha .fecha-borrar { display: grid; place-items: center; }
@media (hover: hover) { .fecha-borrar:hover { color: #ff6b86; background: rgba(255, 80, 110, 0.12); } }

/* ============================================================================
   ENTREGADO F/P (entregado, falta pago): aro naranja neón y al final de la lista
   ============================================================================ */
.tarea.entregado-fp {
  border-color: rgba(255, 150, 60, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 150, 60, 0.45), 0 0 18px rgba(255, 140, 40, 0.35), inset 0 0 16px rgba(255, 140, 40, 0.07);
}
.ped-tag.fp {
  color: #1d0e02;
  background: linear-gradient(135deg, #ffc061, #ff7a2f);
  box-shadow: 0 0 10px rgba(255, 140, 40, 0.5);
}

/* Botón en la ficha */
.boton-fp {
  width: calc(100% - 36px); margin: 0 18px 8px;
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 12px 16px; border-radius: 12px;
  background: #1a1b21; border: 1px dashed rgba(255, 150, 60, 0.45);
  color: var(--texto-2);
  transition: border-color 0.25s, background-color 0.25s, box-shadow 0.3s, color 0.2s, transform 0.2s var(--rebote);
}
.boton-fp .fp-icono { font-size: 22px; }
.boton-fp .fp-textos { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.boton-fp b { color: #ffb36b; font-size: 15.5px; letter-spacing: 0.02em; }
.boton-fp small { font-size: 12.5px; color: var(--texto-3); }
.boton-fp .fp-tilde {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #ffc061, #ff7a2f); color: #1d0e02; font-weight: 800;
}
.boton-fp.activo {
  border-style: solid; border-color: rgba(255, 150, 60, 0.85);
  background: rgba(255, 140, 40, 0.10);
  box-shadow: 0 0 20px rgba(255, 140, 40, 0.3);
}
.boton-fp.activo small { color: rgba(255, 190, 130, 0.8); }
.boton-fp.pop { animation: chip-pop 0.45s var(--rebote); }

@media (hover: hover) {
  .tarea.entregado-fp:hover {
    border-color: rgba(255, 160, 70, 1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 150, 60, 0.6), 0 0 28px rgba(255, 140, 40, 0.45);
  }
  .boton-fp:hover { border-color: rgba(255, 150, 60, 0.85); box-shadow: 0 0 16px rgba(255, 140, 40, 0.25); }
}

/* ============================================================================
   TERMINADO (falta que lo retiren): aro verde agua neón,
   al final de la lista pero por encima de los "Entregado F/P"
   ============================================================================ */
.tarea.terminado-listo {
  border-color: rgba(50, 245, 185, 0.8);
  box-shadow: 0 0 0 1px rgba(50, 245, 185, 0.45), 0 0 18px rgba(40, 235, 170, 0.32), inset 0 0 16px rgba(40, 235, 170, 0.07);
}
.ped-tag.terminado {
  color: #02170f;
  background: linear-gradient(135deg, #7dffd4, #22d69a);
  box-shadow: 0 0 10px rgba(40, 235, 170, 0.5);
}

/* Botón en la ficha (mismo formato que F/P, en verde) */
.boton-fp.boton-terminado { border-color: rgba(50, 245, 185, 0.45); }
.boton-fp.boton-terminado b { color: #6ff5c8; }
.boton-fp.boton-terminado .fp-tilde { background: linear-gradient(135deg, #7dffd4, #22d69a); color: #02170f; }
.boton-fp.boton-terminado.activo {
  border-color: rgba(50, 245, 185, 0.85);
  background: rgba(40, 235, 170, 0.09);
  box-shadow: 0 0 20px rgba(40, 235, 170, 0.28);
}
.boton-fp.boton-terminado.activo small { color: rgba(150, 255, 215, 0.8); }

@media (hover: hover) {
  .tarea.terminado-listo:hover {
    border-color: rgba(70, 255, 195, 1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(50, 245, 185, 0.6), 0 0 28px rgba(40, 235, 170, 0.42);
  }
  .boton-fp.boton-terminado:hover { border-color: rgba(50, 245, 185, 0.85); box-shadow: 0 0 16px rgba(40, 235, 170, 0.25); }
}

/* ============================================================================
   ENVÍO: interruptor + detalle, y camioncito en la tarjeta
   ============================================================================ */
.envio-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; color: var(--texto); font-size: 15.5px; }
.interruptor {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 50px; height: 30px; border-radius: 999px; margin: 0;
  background: rgba(255, 255, 255, 0.12); border: 1px solid var(--borde);
  position: relative; cursor: pointer; transition: background-color 0.25s, box-shadow 0.3s;
}
.interruptor::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s var(--rebote);
}
.interruptor:checked { background: var(--neon-grad); box-shadow: 0 0 14px rgba(46, 230, 255, 0.4); }
.interruptor:checked::after { transform: translateX(20px); }
.envio-fila + .pieza-estilo.visible { margin-top: 12px; }
.envio-detalle {
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(46, 230, 255, 0.3);
  border-radius: 10px; padding: 10px 12px;
}
.ped-dato.envio { color: #bfe6ff; background: rgba(90, 170, 255, 0.10); border-color: rgba(90, 170, 255, 0.35); }

/* ============================================================================
   PEDIDOS → SEMANA (calendario de lunes a domingo)
   ============================================================================ */
.vista-modo {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 16px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--borde); border-radius: 12px;
}
.vista-modo[hidden] { display: none; }
.vista-modo button {
  border: 0; background: none; padding: 7px 14px; border-radius: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--texto-2);
  transition: background-color 0.2s, color 0.2s, box-shadow 0.25s;
}
.vista-modo button[hidden] { display: none; }
.vista-modo button.solo-icono { padding: 5px 10px; display: grid; place-items: center; }
.vista-modo button.solo-icono svg { width: 19px; height: 19px; display: block; }
.vista-modo button.activo {
  background: rgba(46, 230, 255, 0.12); color: var(--neon);
  box-shadow: 0 0 0 1px rgba(46, 230, 255, 0.45), 0 0 14px rgba(46, 230, 255, 0.2);
}

/* Los días uno al lado del otro: se deslizan de costado y frenan en cada día */
.tareas.semana {
  max-width: none;
  display: flex; flex-direction: row; align-items: flex-start; gap: 12px;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory; scroll-padding: 0 4px;
  padding: 2px 4px 14px; margin: 0 -4px;
  scrollbar-width: thin; scrollbar-color: rgba(46, 230, 255, 0.35) transparent;
}
.tareas.semana .sem-dia { flex: 0 0 240px; scroll-snap-align: start; }
.sem-dia {
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px;
  padding: 12px; min-width: 0;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: sem-entra 0.45s var(--suave) both; animation-delay: calc(var(--i) * 40ms);
}
@keyframes sem-entra { from { opacity: 0; transform: translateY(10px); } }
.sem-dia.hoy {
  border-color: rgba(46, 230, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(46, 230, 255, 0.25), 0 0 22px rgba(46, 230, 255, 0.18);
}
.sem-dia.sin-dia { border-style: dashed; }

.sem-cab { margin-bottom: 10px; }
.sem-nombre { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.sem-hoy {
  font-size: 10px; letter-spacing: 1px; padding: 2px 6px; border-radius: 6px;
  color: #04060c; background: var(--neon-grad); box-shadow: var(--glow);
}
.sem-cuenta { font-size: 12.5px; color: var(--texto-2); margin-top: 3px; }
.sem-carga { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); margin-top: 9px; overflow: hidden; }
.sem-carga span {
  display: block; height: 100%; border-radius: 5px;
  transform-origin: left; animation: sem-barra 0.8s var(--suave) both 0.2s;
}
@keyframes sem-barra { from { transform: scaleX(0); } }
.sem-carga.baja span  { background: var(--neon); box-shadow: 0 0 10px rgba(46, 230, 255, 0.6); }
.sem-carga.media span { background: linear-gradient(90deg, var(--neon), var(--neon-2)); box-shadow: 0 0 10px rgba(178, 107, 255, 0.6); }
.sem-carga.alta span  { background: linear-gradient(90deg, var(--neon-2), #ff9a3c); box-shadow: 0 0 10px rgba(255, 154, 60, 0.7); }

.sem-lista { display: flex; flex-direction: column; gap: 7px; }
.sem-ped {
  width: 100%; text-align: left; padding: 9px 10px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 2px solid var(--neon); border-radius: 10px;
  transition: background-color 0.2s, transform 0.15s var(--suave);
}
.sem-ped:hover { background: rgba(255, 255, 255, 0.08); }
.sem-ped:active { transform: scale(0.98); }
.sem-ped.terminado { border-left-color: #32f5b9; }
.sem-ped.fp { border-left-color: #ff9a3c; }
.sem-cliente { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sem-piezas { margin-top: 3px; font-size: 12px; color: var(--texto-2); line-height: 1.45; }
.sem-marcas { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.sem-marca {
  font-size: 10.5px; padding: 2px 6px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.07); color: var(--texto-2);
}
.sem-marca.terminado { color: #32f5b9; background: rgba(50, 245, 185, 0.1); }
.sem-marca.fp { color: #ff9a3c; background: rgba(255, 154, 60, 0.12); }
.sem-vacio { margin: 0; font-size: 12px; color: var(--texto-3); }
.sem-hechos { font-size: 12px; color: var(--texto-3); padding: 2px 2px 0; }

@media (max-width: 820px) {
  /* En el iPhone cada día ocupa casi toda la pantalla y se asoma el siguiente */
  .tareas.semana .sem-dia { flex-basis: 82%; }
}

/* ============================================================================
   PEDIDOS → COMPACTA (más pedidos en pantalla; al pasar el cursor se abre)
   ============================================================================ */
.tareas.compacta { gap: 5px; }
.tareas.compacta .tarea.pedido { padding-top: 8px; padding-bottom: 8px; align-items: center; }
.tareas.compacta .tarea.pedido .estrella { margin-top: 0; }
.tareas.compacta .ped-cab { flex-wrap: nowrap; }
.tareas.compacta .ped-cliente { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tareas.compacta .ped-tag { flex-shrink: 0; }
/* Las piezas en un solo renglón */
.tareas.compacta .ped-piezas {
  flex-direction: row; gap: 4px 12px; margin-top: 3px;
  overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.tareas.compacta .ped-pieza { font-size: 12.5px; flex-shrink: 0; }
/* Los datos (teléfono, cobro, días…) escondidos */
.tareas.compacta .ped-datos {
  max-height: 0; margin-top: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.3s var(--suave), opacity 0.2s, margin-top 0.3s var(--suave);
}
/* En la Mac: al pasar el cursor (un instante) la tarjeta se abre con todo */
@media (hover: hover) {
  .tareas.compacta .tarea.pedido:hover {
    background: var(--tarjeta-hover);
    box-shadow: 0 0 0 1px rgba(46, 230, 255, 0.35), 0 0 18px rgba(46, 230, 255, 0.15);
  }
  .tareas.compacta .tarea.pedido:hover .ped-piezas {
    flex-wrap: wrap; white-space: normal; mask-image: none; -webkit-mask-image: none;
  }
  .tareas.compacta .tarea.pedido:hover .ped-datos {
    max-height: 140px; opacity: 1; margin-top: 8px;
    transition-delay: 0.25s;
  }
}
/* Tareas simples también más chicas en la vista achicada */
.tareas.compacta .tarea:not(.pedido) { padding-top: 7px; padding-bottom: 7px; }
.tareas.compacta .tarea:not(.pedido) .tarea-texto { font-size: 15px; }

/* ============================================================================
   DÍAS FIJOS: inicial en neón + relojito de horario
   ============================================================================ */
.fila-icono.ico-dia {
  width: 24px; height: 24px; border-radius: 7px;
  font-size: 13px; font-weight: 800; letter-spacing: 0;
  color: var(--neon);
  border: 1.5px solid rgba(46, 230, 255, 0.55);
  background: rgba(46, 230, 255, 0.06);
  text-shadow: 0 0 8px rgba(46, 230, 255, 0.9);
  box-shadow: 0 0 8px rgba(46, 230, 255, 0.18), inset 0 0 6px rgba(46, 230, 255, 0.12);
}
.fila-icono.ico-dia.hoy {
  color: #fff; border-color: transparent;
  background: var(--neon-grad);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 14px rgba(46, 230, 255, 0.55), 0 0 22px rgba(178, 107, 255, 0.35);
}
.fila-lista.activa .fila-icono.ico-dia { filter: none; border-color: var(--neon); }

/* Relojito al lado del círculo (solo en los días) */
.reloj {
  flex: none; align-self: center;
  min-width: 36px; height: 36px; padding: 0 4px; margin: 0 -2px 0 -6px;
  display: grid; place-items: center;
  border: 0; border-radius: 9px; background: none;
  color: var(--texto-2);
  transition: color 0.2s, background-color 0.2s;
}
.reloj svg { width: 19px; height: 19px; display: block; }
.reloj:hover { color: var(--neon); background: rgba(46, 230, 255, 0.08); }
.reloj.con-hora {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 3px 7px; height: auto; min-height: 34px;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15;
  color: var(--neon); text-shadow: 0 0 8px rgba(46, 230, 255, 0.6);
  border: 1px solid rgba(46, 230, 255, 0.4); background: rgba(46, 230, 255, 0.07);
}
.reloj.con-hora span + span { color: var(--texto-2); text-shadow: none; font-weight: 600; }

/* Ventanita para elegir el horario */
.horario-fondo {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: aparece-fondo 0.18s ease;
}
.horario-fondo.saliendo { opacity: 0; transition: opacity 0.18s; }
@keyframes aparece-fondo { from { opacity: 0; } }
.horario-caja {
  width: min(340px, 100%); padding: 18px;
  background: rgba(16, 19, 28, 0.97); border: 1px solid rgba(46, 230, 255, 0.35); border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(46, 230, 255, 0.15);
  animation: aparece-caja 0.25s var(--suave);
}
@keyframes aparece-caja { from { opacity: 0; transform: scale(0.94) translateY(8px); } }
.horario-titulo { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--neon); }
.horario-tarea { margin-top: 4px; font-size: 17px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Línea del día (como el Calendario del iPhone) */
.horario-caja.linea { width: min(380px, 100%); }
.horario-resumen-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 6px; }
.hl-horas {
  white-space: nowrap; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.3px;
  color: #fff; text-shadow: 0 0 14px rgba(46, 230, 255, 0.6);
}
.hl-dura { font-size: 13px; color: var(--texto-2); }
.linea-scroll {
  position: relative; margin-top: 12px; height: min(52vh, 380px); overflow-y: auto;
  border-radius: 14px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  scrollbar-width: thin; scrollbar-color: rgba(46,230,255,0.3) transparent;
}
.linea-dia { position: relative; margin: 12px 0; cursor: pointer; }
.linea-raya { position: absolute; left: 52px; right: 10px; height: 0; border-top: 1px solid rgba(255,255,255,0.09); }
.linea-raya.media { border-top-style: dashed; border-top-color: rgba(255,255,255,0.05); }
.linea-hora {
  position: absolute; left: -46px; top: -8px; width: 38px; text-align: right;
  font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--texto-3);
}
.linea-otra {
  position: absolute; left: 58px; right: 14px; padding: 3px 8px; overflow: hidden;
  border-radius: 8px; font-size: 11.5px; color: var(--texto-2); white-space: nowrap; text-overflow: ellipsis;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10);
  border-left: 3px solid rgba(178, 107, 255, 0.6);
}
.linea-bloque {
  position: absolute; left: 58px; right: 14px; z-index: 2;
  padding: 5px 10px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, rgba(46,230,255,0.28), rgba(178,107,255,0.22));
  border: 1.5px solid var(--neon);
  box-shadow: 0 0 18px rgba(46, 230, 255, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
  transition: box-shadow 0.2s, transform 0.15s;
}
.linea-bloque.arrastrando { cursor: grabbing; transform: scale(1.02); box-shadow: 0 0 28px rgba(46, 230, 255, 0.6), inset 0 1px 0 rgba(255,255,255,0.3); }
.lb-nombre { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-horas { font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,0.85); }
.linea-bloque.corto { display: flex; align-items: center; gap: 8px; padding-top: 0; padding-bottom: 0; }
.linea-bloque.corto .lb-nombre { flex: 1; min-width: 0; }
/* Manija para estirar (abajo del bloque) */
.lb-estirar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 18px; cursor: ns-resize;
  display: grid; place-items: center;
}
.lb-estirar span { width: 34px; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.85); box-shadow: 0 0 8px var(--neon); }
.linea-otra.es-tanda { border-left-color: var(--neon-2); color: #d9c2ff; }
.linea-otra.choca {
  border-color: rgba(178, 107, 255, 0.8); border-left-color: var(--neon-2); color: #fff;
  background: rgba(178, 107, 255, 0.22); box-shadow: 0 0 16px rgba(178, 107, 255, 0.45);
}
.hl-dura.choca { color: #d9c2ff; }
.horario-juntar {
  display: block; width: 100%; margin-top: 12px; padding: 13px; border: 0; border-radius: 12px;
  font-size: 15px; font-weight: 750; color: #04060c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(135deg, var(--neon-2), var(--neon));
  box-shadow: 0 0 22px rgba(178, 107, 255, 0.55);
  animation: juntar-aparece 0.25s var(--suave);
}
.horario-juntar[hidden] { display: none; }
@keyframes juntar-aparece { from { opacity: 0; transform: translateY(6px) scale(0.96); } }
.horario-separar { color: #d9c2ff; border-color: rgba(178, 107, 255, 0.45) !important; }
.linea-ayuda { margin-top: 8px; font-size: 11.5px; color: var(--texto-3); text-align: center; }
.horario-botones { display: flex; gap: 8px; margin-top: 16px; }
.horario-botones button {
  flex: 1; padding: 11px 8px; border-radius: 11px; font-size: 14px; font-weight: 650;
  border: 1px solid var(--borde); background: rgba(255, 255, 255, 0.05);
}
.horario-guardar { background: var(--neon-grad) !important; color: #04060c; border: 0 !important; box-shadow: var(--glow); }
.horario-quitar { color: #ff7a7a; }

.sem-marca.hora { color: var(--neon); background: rgba(46, 230, 255, 0.1); font-weight: 700; }

/* ============================================================================
   TANDAS: tareas de un día que se hacen juntas (mismo horario)
   ============================================================================ */
.tanda {
  position: relative; padding: 8px; border-radius: 16px;
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(160deg, rgba(178, 107, 255, 0.10), rgba(46, 230, 255, 0.05));
  border: 1px solid rgba(178, 107, 255, 0.5);
  box-shadow: 0 0 18px rgba(178, 107, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: tarea-entra 0.45s var(--suave) both; animation-delay: calc(var(--i) * 35ms);
}
.tanda-cab { display: flex; align-items: center; gap: 10px; padding: 2px 4px 2px 2px; }
.tanda-cab .reloj { margin: 0; }
.tanda-titulo { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.separar-tanda {
  flex: none; padding: 6px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 650;
  color: #d9c2ff; background: rgba(178, 107, 255, 0.10); border: 1px solid rgba(178, 107, 255, 0.45);
}
.separar-tanda:hover { background: rgba(178, 107, 255, 0.2); }
.tanda-titulo b { font-size: 14px; color: #d9c2ff; text-shadow: 0 0 10px rgba(178, 107, 255, 0.6); }
.tanda-titulo span { font-size: 12.5px; color: var(--texto-2); }
.tanda .tarea { margin: 0; }
.sacar-tanda {
  flex: none; align-self: center; padding: 5px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: var(--texto-2);
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(178, 107, 255, 0.35);
}
.sacar-tanda:hover { color: #d9c2ff; background: rgba(178, 107, 255, 0.12); }