/* Afilador del Altozano - PWA */

:root {
  --color-primario: #1a3a52;
  --color-primario-hover: #2a5a7a;
  --color-secundario: #6b8e9e;
  --color-fondo: #f5f6f8;
  --color-borde: #dee2e6;
  --color-texto: #212529;
  --color-error: #c0392b;
  --color-ok: #27ae60;
  --sombra: 0 2px 8px rgba(0,0,0,.08);
  --radio: 8px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-texto);
  background: var(--color-fondo);
  min-height: 100vh;
  padding-bottom: 3rem;
}

/* Login */
.pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: linear-gradient(160deg, var(--color-primario) 0%, #2d5a7a 100%);
}

.login-card {
  background: #fff;
  padding: 2rem;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  width: 100%;
  max-width: 360px;
}

.login-card h1 {
  margin: 0 0 0.25rem;
  font-size: 1.5rem;
  color: var(--color-primario);
}

.login-card .subtitulo {
  margin: 0 0 1.5rem;
  color: #666;
  font-size: 0.9rem;
}

.login-card label {
  display: block;
  margin-bottom: 1rem;
}

.login-card label span {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  color: #555;
}

.login-card input {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  font-size: 1rem;
}

.login-card button {
  width: 100%;
  padding: 0.75rem;
  margin-top: 0.5rem;
  background: var(--color-primario);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
}

.login-card button:hover {
  background: var(--color-primario-hover);
}

/* Header */
.app-header {
  background: var(--color-primario);
  color: #fff;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: relative;
}

/* Menú hamburguesa (3 líneas) */
.btn-menu-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
  border-radius: 6px;
}
.btn-menu-hamburger:hover {
  background: rgba(255,255,255,.15);
}
.btn-menu-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  margin: 0 auto;
}

.app-header .logo {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  flex: 1;
  text-align: center;
}

.app-header .header-nav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.app-header .user-info {
  font-size: 0.8rem;
  opacity: .9;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-header .header-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
}

.app-header .header-nav a:hover {
  text-decoration: underline;
}

/* Drawer del menú (todas las opciones) */
.menu-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.menu-drawer-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.menu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  max-width: 85vw;
  height: 100vh;
  background: #fff;
  z-index: 9999;
  box-shadow: 4px 0 20px rgba(0,0,0,.15);
  transform: translateX(-100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
}
.menu-drawer.abierto {
  transform: translateX(0);
}

.menu-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--color-primario);
  color: #fff;
}
.menu-drawer-titulo {
  font-weight: 700;
  font-size: 1.1rem;
}
.btn-cerrar-menu {
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(255,255,255,.2);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.btn-cerrar-menu:hover {
  background: rgba(255,255,255,.3);
}

.menu-drawer-list {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0;
  overflow-y: auto;
}
.menu-drawer-list li {
  margin: 0;
}
.menu-drawer-list a {
  display: block;
  padding: 0.75rem 1.25rem;
  color: var(--color-texto);
  text-decoration: none;
  font-size: 1rem;
  border-bottom: 1px solid var(--color-borde);
}
.menu-drawer-list a:hover,
.menu-drawer-list a.activo {
  background: #e8f4f8;
  color: var(--color-primario);
}

body.menu-abierto {
  overflow: hidden;
}

/* Main */
.app-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}

.app-main h1 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  color: var(--color-primario);
}

/* Mensajes */
.mensaje {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.mensaje.error {
  background: #fdecea;
  color: var(--color-error);
}

.mensaje.ok {
  background: #e8f8f0;
  color: var(--color-ok);
}
.mensaje.info {
  background: #e8f4ff;
  color: #0b456b;
  border: 1px solid #b9daf2;
}
.login-ayuda-ssl {
  font-size: 0.9rem;
  margin-top: 0;
  margin-bottom: 1rem;
}
.login-ayuda-ssl code {
  background: rgba(255,255,255,.65);
  padding: 0.05rem 0.25rem;
  border-radius: 4px;
}
.login-link-seguro {
  display: inline-block;
  margin-left: 0.25rem;
  font-weight: 700;
  color: #0b456b;
}
.login-link-seguro:hover { text-decoration: underline; }

/* Botones */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
}

.btn-primario {
  background: var(--color-primario);
  color: #fff;
}

.btn-primario:hover {
  background: var(--color-primario-hover);
}

.btn-secundario {
  background: #fff;
  color: var(--color-primario);
  border: 1px solid var(--color-primario);
}

.btn-secundario:hover {
  background: #f0f4f8;
}

.btn-mini {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  margin-left: 0.25rem;
}
.btn-mini.btn-primario {
  background: var(--color-primario);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  display: inline-block;
}
.btn-mini.btn-primario:hover {
  background: var(--color-primario-hover);
}

.btn-peligro {
  background-color: #e74c3c;
  color: #fff;
  border: none;
}

.btn-peligro:hover {
  background-color: #c0392b;
}

.tabla-acciones {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.badge-credito {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 50%;
  background: #e74c3c;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.badge-nota {
  cursor: help;
}

/* Tablas */
.tabla-responsive {
  overflow-x: auto;
  margin-bottom: 1.5rem;
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.pedidos-listado .pedidos-cards { display: none; }
.pedido-card {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 0.9rem;
  margin-bottom: 0.9rem;
}
.pedido-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.pedido-card-cliente { font-weight: 700; color: #1f2d3d; }
.pedido-card-id { color: #667; font-size: 0.9rem; }
.pedido-card-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
}
.pedido-card-label { color: #667; font-size: 0.85rem; }
.pedido-card-value { color: #1f2d3d; font-weight: 600; }
.pedido-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
}
.pedido-card-grid > div { display: flex; flex-direction: column; gap: 0.15rem; }
.pedido-card-actions {
  margin-top: 0.5rem;
  display: flex;
  justify-content: flex-end;
}

.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.tabla-datos th,
.tabla-datos td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-borde);
}

.tabla-datos th {
  background: #f8f9fa;
  font-weight: 600;
  color: var(--color-primario);
}

.tabla-datos tbody tr:hover {
  background: #f8f9fa;
}

.tabla-datos a {
  color: var(--color-primario);
  text-decoration: none;
}

.tabla-datos a:hover {
  text-decoration: underline;
}

.estado {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  text-transform: capitalize;
}

.estado-pendiente { background: #fff3cd; color: #856404; }
.estado-en progreso { background: #cce5ff; color: #004085; }
.estado-completado { background: #d4edda; color: #155724; }
.estado-cancelado { background: #f8d7da; color: #721c24; }

@media (max-width: 700px) {
  .pedidos-listado .tabla-responsive { display: none; }
  .pedidos-listado .pedidos-cards { display: block; }
  .pedido-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.estado-activo { background: #d4edda; color: #155724; }
.estado-inactivo { background: #f8d7da; color: #721c24; }

/* Formularios */
.form-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  max-width: 480px;
  margin-bottom: 1.5rem;
}

.form-card label {
  display: block;
  margin-bottom: 1rem;
}

.form-card label span {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.form-card input,
.form-card select,
.form-card textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  font-size: 1rem;
}

.form-card textarea {
  min-height: 80px;
  resize: vertical;
}

.form-acciones {
  margin-top: 1.25rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.filtro-fecha {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  margin-bottom: 1rem;
}

.filtro-fecha label span {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

/* Dos botones diarios (Pedidos / Rutas) con estilo card grande */
.botones-diarios.dashboard-cards {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 2rem;
  max-width: 560px;
}
.botones-diarios .card {
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 380px) {
  .botones-diarios.dashboard-cards {
    grid-template-columns: 1fr;
  }
}

/* Dashboard admin (cards genéricas en otras páginas) */
.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.dashboard-cards .card {
  display: block;
  background: #fff;
  padding: 1.25rem;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  text-decoration: none;
  color: inherit;
  border: 2px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}

.dashboard-cards .card:hover {
  border-color: var(--color-primario);
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.card-titulo {
  display: block;
  font-weight: 700;
  color: var(--color-primario);
  margin-bottom: 0.25rem;
}

.card-desc {
  font-size: 0.9rem;
  color: #666;
}

.sin-datos {
  color: #666;
  padding: 1.5rem;
  background: #fff;
  border-radius: var(--radio);
}

.info-dia-reparto {
  padding: 0.6rem 0.75rem;
  background: #e8f4f8;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.nav-repartidor {
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.nav-repartidor a {
  color: var(--color-primario);
  text-decoration: none;
}
.nav-repartidor a:hover {
  text-decoration: underline;
}

.check-pagado {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}
.resumen-cobros {
  margin: 1rem 0;
  padding: 0.75rem;
  background: #f0f4f8;
  border-radius: 6px;
}
.resumen-cobros.liquidacion p { margin: 0.35rem 0; }
.resumen-cobros .desglose { font-size: 0.9rem; color: #555; }

/* Footer */
.app-footer {
  text-align: center;
  padding: 1rem;
  color: #666;
  font-size: 0.85rem;
  margin-top: 2rem;
}

/* Safe area para móvil / PWA */
/* Lista paradas (rutas) */
.lista-paradas {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.parada-item {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--color-borde);
  background: #fff;
}
.parada-item:first-child { border-radius: var(--radio) var(--radio) 0 0; }
.parada-item:last-child { border-radius: 0 0 var(--radio) var(--radio); border-bottom: none; }
.parada-orden {
  font-weight: 700;
  color: var(--color-primario);
}
.lista-rutas .parada-item {
  grid-template-columns: minmax(6.5rem, 9.5rem) 1fr auto;
}
.lista-rutas .parada-orden {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.parada-dir {
  grid-column: 2;
  color: #666;
  font-size: 0.85rem;
}
.parada-acciones {
  grid-column: 3;
  grid-row: 1 / -1;
  display: flex;
  gap: 0.5rem;
}
.parada-acciones a {
  color: var(--color-primario);
  font-size: 0.9rem;
}

/* Ruta del día (repartidor) */
.ruta-repartidor .parada-item {
  grid-template-columns: 2rem 1fr;
  align-items: start;
}
.ruta-repartidor .parada-pedidos {
  grid-column: 2;
  margin-top: 0.25rem;
}
.ruta-repartidor .parada-pedidos .minibadge {
  display: inline-block;
  margin: 0.2rem 0.5rem 0.2rem 0;
  padding: 0.2rem 0.5rem;
  background: #e8f4f8;
  border-radius: 4px;
  font-size: 0.85rem;
}
.ruta-repartidor .parada-tel {
  grid-column: 2;
  font-size: 0.9rem;
}

/* Vista semana: 7 días + sin asignar, etiquetas arrastrables */
.selector-repartidor { margin-bottom: 1rem; }
.selector-repartidor label span { display: block; margin-bottom: 0.25rem; font-size: 0.9rem; }
.selector-repartidor select { padding: 0.5rem 0.75rem; font-size: 1rem; min-width: 200px; }

.filtros-pedidos { margin-bottom: 1rem; }
.filtros-pedidos .fila-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1rem;
}
.filtros-pedidos .fila-filtros label span { display: block; margin-bottom: 0.25rem; font-size: 0.9rem; color: #555; }
.filtros-pedidos .fila-filtros select,
.filtros-pedidos .fila-filtros input[type="date"] {
  padding: 0.4rem 0.6rem;
  font-size: 1rem;
  min-width: 140px;
}

/* Autocompletar cliente (un solo campo) */
.sugerencias {
  position: relative;
  margin-top: 0.35rem;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.sugerencia-item {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.95rem;
}
.sugerencia-item:hover,
.sugerencia-item.activo {
  background: rgba(0,0,0,.06);
}
.hint-drag { color: #555; font-size: 0.9rem; margin-bottom: 1.25rem; }

.semanas-contenedor { margin-bottom: 2rem; }
.bloque-repartidor { margin-bottom: 2rem; }
.bloque-repartidor .nombre-repartidor {
  font-size: 1.1rem;
  color: var(--color-primario);
  margin: 0 0 0.5rem;
  padding-bottom: 0.25rem;
}
.bloque-sin-asignar { margin-bottom: 1.5rem; }
.bloque-sin-asignar .semanas-columnas { grid-template-columns: 1fr; max-width: 320px; }

.semanas-columnas {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 900px) {
  .semanas-columnas { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 500px) {
  .semanas-columnas { grid-template-columns: repeat(2, 1fr); }
}

.col-dia {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  border: 2px solid var(--color-borde);
  min-height: 120px;
}
.col-dia-titulo {
  font-weight: 700;
  color: var(--color-primario);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-borde);
  font-size: 0.95rem;
}
.col-dia-clientes {
  padding: 0.5rem 0.75rem;
  min-height: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-content: flex-start;
}
.col-dia-clientes.drag-over {
  background: #e8f4f8;
  border: 2px dashed var(--color-primario);
  margin: -2px;
}

.etiqueta-cliente {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: var(--color-primario);
  color: #fff;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: element;
  -webkit-user-select: none;
}
.etiqueta-cliente:active { cursor: grabbing; }
.etiqueta-cliente.arrastrando { opacity: 0.6; }
.indicador-pedido-semana {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 0.35rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  vertical-align: middle;
}
.col-dia-clientes { cursor: default; }

.col-sin-asignar { border-color: var(--color-secundario); }
.col-sin-asignar .col-dia-titulo { color: var(--color-secundario); }
.col-sin-asignar .etiqueta-cliente { background: var(--color-secundario); }

/* Vista Todos: una fila de columnas + colores por repartidor */
.leyenda-repartidores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.leyenda-item {
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #fff;
}
.rep-color-0 { background: #1a3a52 !important; }
.rep-color-1 { background: #27ae60 !important; }
.rep-color-2 { background: #8e44ad !important; }
.rep-color-3 { background: #e67e22 !important; }
.rep-color-4 { background: #3498db !important; }
.rep-color-5 { background: #c0392b !important; }
.rep-color-6 { background: #16a085 !important; }
.rep-color-7 { background: #2c3e50 !important; }
.semanas-una-fila.semanas-columnas {
  grid-template-columns: repeat(8, 1fr);
}
.col-dia-todos .col-dia-rep-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Separación sutil por repartidor: línea de color encima de cada grupo */
.grupo-rep {
  margin-bottom: 0.35rem;
  padding-top: 0.35rem;
  border-top: 2px solid transparent;
}
.grupo-rep:first-child { border-top-color: transparent !important; padding-top: 0; margin-top: 0; }
.grupo-rep.rep-color-0 { border-top-color: #1a3a52; }
.grupo-rep.rep-color-1 { border-top-color: #27ae60; }
.grupo-rep.rep-color-2 { border-top-color: #8e44ad; }
.grupo-rep.rep-color-3 { border-top-color: #e67e22; }
.grupo-rep.rep-color-4 { border-top-color: #3498db; }
.grupo-rep.rep-color-5 { border-top-color: #c0392b; }
.grupo-rep.rep-color-6 { border-top-color: #16a085; }
.grupo-rep.rep-color-7 { border-top-color: #2c3e50; }
.grupo-rep-nombre {
  font-size: 0.75rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.2rem;
  padding: 0.15rem 0 0.15rem 0.35rem;
  border-left: 3px solid #999;
}
.grupo-rep-nombre.rep-color-0 { border-left-color: #1a3a52; }
.grupo-rep-nombre.rep-color-1 { border-left-color: #27ae60; }
.grupo-rep-nombre.rep-color-2 { border-left-color: #8e44ad; }
.grupo-rep-nombre.rep-color-3 { border-left-color: #e67e22; }
.grupo-rep-nombre.rep-color-4 { border-left-color: #3498db; }
.grupo-rep-nombre.rep-color-5 { border-left-color: #c0392b; }
.grupo-rep-nombre.rep-color-6 { border-left-color: #16a085; }
.grupo-rep-nombre.rep-color-7 { border-left-color: #2c3e50; }
.col-dia-todos .col-dia-clientes {
  min-height: 2.5rem;
}

/* Menú "Mover a" (clic en etiqueta, para móvil o fallback) */
.menu-mover-dia {
  position: fixed;
  z-index: 10000;
  background: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  border: 1px solid var(--color-borde);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.9rem;
}
.menu-mover-dia-doble {
  flex-direction: column;
  align-items: flex-start;
}
.menu-mover-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--color-borde);
}
.menu-mover-fila:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.btn-mover-dia {
  padding: 0.35rem 0.6rem;
  background: var(--color-primario);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}
.btn-mover-dia:hover {
  background: var(--color-primario-hover);
}
.btn-mover-dia.btn-anadir {
  background: var(--color-secundario);
}
.btn-mover-dia.btn-anadir:hover {
  background: #5a7a8a;
}

@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: calc(3rem + env(safe-area-inset-bottom)); }
  .app-header { padding-left: calc(1rem + env(safe-area-inset-left)); padding-right: calc(1rem + env(safe-area-inset-right)); }
  .app-main { padding-left: calc(1rem + env(safe-area-inset-left)); padding-right: calc(1rem + env(safe-area-inset-right)); }
}

/* Mejoras de UX 2026 */
.eyebrow {
  display: inline-block;
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secundario);
}

.page-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1.25rem;
  background: linear-gradient(135deg, rgba(26,58,82,.08), rgba(107,142,158,.1));
  border: 1px solid rgba(26,58,82,.08);
  border-radius: 14px;
}

.page-intro.compact {
  padding: 1rem 1.15rem;
}

.page-intro h1 {
  margin-bottom: 0.35rem;
}

.page-intro p {
  margin: 0;
  color: #51606d;
}

.page-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.login-card-lg {
  max-width: 420px;
}

.login-help {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-borde);
  display: grid;
  gap: 0.2rem;
  color: #555;
  font-size: 0.9rem;
}

.menu-drawer-user {
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--color-borde);
  background: #f8fafb;
}

.menu-drawer-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #667;
}

.static-card {
  cursor: default;
}

.static-card:hover {
  border-color: transparent;
  box-shadow: var(--sombra);
}

.stats-cards .card-titulo {
  font-size: 1.5rem;
  margin-bottom: 0.35rem;
}

.helper-cards,
.compact-cards {
  margin-bottom: 1rem;
}

.form-card-wide {
  max-width: 760px;
}

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

.form-section {
  border: 1px solid var(--color-borde);
  border-radius: 10px;
  padding: 1rem;
  margin: 1rem 0;
}

.form-section legend {
  padding: 0 0.5rem;
  font-weight: 700;
}

/* Banner de estado del pedido */
.pedido-estado-banner {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .75rem 1.1rem;
  border-radius: 10px;
  margin-bottom: 1.2rem;
  font-size: .97rem;
  border: 1.5px solid var(--color-borde);
  background: #f8f9fa;
}
.pedido-estado-banner strong { font-size: 1.05rem; }
.pedido-estado-banner small  { color: #666; }
.pedido-estado-banner.estado-iniciado  { background: #fffbea; border-color: #f0c040; }
.pedido-estado-banner.estado-recogido  { background: #e8f4fd; border-color: #5b9bd5; }
.pedido-estado-banner.estado-entregado { background: #eafaf1; border-color: #27ae60; }

/* Info readonly dentro de formularios */
.form-readonly-info {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .75rem;
  background: #f0f4f8;
  border-radius: 6px;
  font-size: .93rem;
  margin-top: .5rem;
}
.form-readonly-info strong { font-size: 1.1rem; color: var(--color-primario); }
.form-readonly-info small  { color: #888; }

.form-help {
  display: block;
  margin-top: 0.35rem;
  color: #667;
  font-size: 0.88rem;
}

.form-inline-card {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--sombra);
}

.resumen-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.25rem 0 0.5rem;
  padding: 0.9rem 1rem;
  background: #f0f6f8;
  border: 1px solid #dbe9ee;
  border-radius: 10px;
}

.resumen-label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #58717f;
}

.inline-form {
  display: inline;
}

.grouped-actions {
  flex-wrap: wrap;
}

.btn-danger {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #efbcc1;
}

.paginacion {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

@media (max-width: 760px) {
  .page-intro,
  .form-grid-two {
    grid-template-columns: 1fr;
    display: grid;
  }

  .page-actions {
    width: 100%;
  }

  .page-actions .btn {
    width: 100%;
    text-align: center;
  }
}

.stats-cards-two {
  grid-template-columns: repeat(2, minmax(280px, 360px));
  gap: 1.5rem;
  justify-content: flex-start;
  margin-bottom: 1.5rem;
}

@media (max-width: 760px) {
  .stats-cards-two {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ─── Vista Repartidor v2 ───────────────────────────────── */

/* Cabecera del día */
.rep-dia-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-primario);
  color: #fff;
  border-radius: var(--radio);
  padding: .6rem 1rem;
  margin-bottom: .75rem;
}
.rep-dia-centro { text-align: center; line-height: 1.3; }
.rep-dia-label  { display: block; font-weight: 700; font-size: 1.1rem; text-transform: capitalize; }
.rep-dia-fecha  { display: block; font-size: .85rem; opacity: .85; }
.rep-btn-dia {
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  padding: .25rem .6rem;
  border-radius: 6px;
  line-height: 1;
}
.rep-btn-dia:hover { background: rgba(255,255,255,.2); }

/* Barra de progreso */
.rep-progreso {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.rep-progreso-barra {
  flex: 1;
  height: 10px;
  background: var(--color-borde);
  border-radius: 5px;
  overflow: hidden;
}
.rep-progreso-fill {
  height: 100%;
  background: var(--color-ok);
  border-radius: 5px;
  transition: width .4s ease;
  min-width: 0;
}
.rep-progreso-texto { font-size: .85rem; color: #555; white-space: nowrap; font-weight:600; }

/* Secciones */
.rep-seccion { margin-bottom: 1.5rem; }
.rep-seccion-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primario);
  margin: 0 0 .6rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--color-borde);
}
.rep-urgente-titulo { color: #c0392b; border-color: #f5c6cb; }

/* Tarjetas de visita */
.rep-card {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1rem;
  margin-bottom: .75rem;
  border-left: 4px solid var(--color-borde);
  transition: border-color .2s;
}
.rep-card-urgente { border-left-color: #e74c3c; }
.rep-card.rep-card-done { border-left-color: var(--color-ok); opacity: .8; }

.rep-card-top {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .4rem;
  flex-wrap: wrap;
}
.rep-parada-num {
  background: var(--color-primario);
  color: #fff;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.rep-card-cliente {
  font-weight: 700;
  font-size: 1.05rem;
  color: #1f2d3d;
  flex: 1;
}
.rep-badge-estado-visita {
  font-size: .78rem;
  background: #d1f2e0;
  color: #1a6b3a;
  padding: .15rem .5rem;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
}

.rep-card-dir, .rep-card-tel {
  display: block;
  font-size: .9rem;
  color: var(--color-primario);
  text-decoration: none;
  margin-top: .25rem;
  word-break: break-word;
}
.rep-card-dir:hover, .rep-card-tel:hover { text-decoration: underline; }

.rep-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .5rem;
}
.rep-pedido-info {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .4rem;
  font-size: .88rem;
  color: #555;
}

/* Botones de acción dentro de tarjeta */
.rep-card-acciones {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .5rem;
  margin-top: .75rem;
}
@media (max-width: 400px) {
  .rep-card-acciones { grid-template-columns: 1fr; }
}
.rep-btn-accion {
  display: block;
  text-align: center;
  padding: .65rem .4rem;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  line-height: 1.3;
}
.rep-btn-sinpedido  { background: #e8f8f0; color: #1a6b3a; }
.rep-btn-pedido     { background: var(--color-primario); color: #fff; }
.rep-btn-incidencia { background: #fff3cd; color: #7d5a00; }
.rep-btn-accion:hover { opacity: .88; }

/* Badges de estado */
.rep-badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 4px;
  font-size: .8rem;
  font-weight: 600;
  white-space: nowrap;
}
.rep-badge-externo   { background: #e8f4ff; color: #004085; }
.rep-badge-retrasado { background: #fde8e8; color: #8b1c1c; }
.rep-badge-hoy       { background: #fff3cd; color: #7d5a00; }
.rep-badge-iniciado  { background: #e8f4ff; color: #004085; }
.rep-badge-recogido  { background: #fff3cd; color: #7d5a00; }
.rep-badge-entregado { background: #d1f2e0; color: #1a6b3a; }

/* Sin datos */
.rep-sin-datos {
  text-align: center;
  color: #888;
  padding: 2rem 1rem;
  background: #fff;
  border-radius: var(--radio);
  font-size: .95rem;
}

/* ── Corrección / deshacer ───────────────────────────── */
.rep-corregir-link {
  font-size: .82rem;
  color: #e67e22;
  text-decoration: none;
  border-bottom: 1px dashed #e67e22;
}
.rep-corregir-link:hover { color: #c0392b; border-color: #c0392b; }

.rep-correccion-details {
  margin-top: 1rem;
  border: 1.5px dashed #e67e22;
  border-radius: 10px;
  overflow: hidden;
}
.rep-correccion-details summary {
  padding: .75rem 1rem;
  cursor: pointer;
  font-size: .92rem;
  color: #e67e22;
  font-weight: 600;
  list-style: none;
  user-select: none;
}
.rep-correccion-details summary::-webkit-details-marker { display: none; }
.rep-correccion-details[open] summary { border-bottom: 1px solid #f0c040; background: #fff8e1; }
.rep-correccion-form { padding: .75rem 1rem 1rem; background: #fff8e1; }

/* ── Opciones de forma de pago (radio buttons táctiles) */
.rep-pago-opciones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4rem;
  margin-top: .4rem;
}
.rep-pago-opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rep-pago-opcion input[type="radio"] { display: none; }
.rep-pago-opcion span {
  display: block;
  width: 100%;
  text-align: center;
  padding: .6rem .3rem;
  border: 2px solid var(--color-borde);
  border-radius: 8px;
  font-size: .88rem;
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, background .15s;
  font-weight: 500;
}
.rep-pago-opcion input[type="radio"]:checked + span {
  border-color: var(--color-primario);
  background: #e8f0f8;
  color: var(--color-primario);
  font-weight: 700;
}

/* Checkbox "cobrado" */
.rep-cobrado-check {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #eafaf1;
  border: 2px solid #27ae60;
  border-radius: 10px;
  padding: .85rem 1rem;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a6e3f;
  margin: .5rem 0;
}
.rep-cobrado-check input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
  accent-color: #27ae60;
  cursor: pointer;
}

/* Botón de entrega grande */
.rep-btn-submit-grande {
  font-size: 1.15rem !important;
  padding: 1rem !important;
  margin-top: .5rem;
}

/* ── Resumen ciclo completo (entregado) ──────────── */
.rep-resumen-ciclo {
  background: #f0faf4;
  border: 1.5px solid #b7e4ca;
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  margin: .5rem 0 1rem;
}
.rep-ciclo-titulo {
  text-align: center;
  margin-bottom: 1rem;
}
.rep-ciclo-linea {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}
.rep-ciclo-linea + .rep-ciclo-linea { margin-top: .25rem; }
.rep-ciclo-icono {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}
.rep-ciclo-linea div { font-size: .95rem; line-height: 1.5; }
.rep-ciclo-linea strong { font-size: 1rem; }
.rep-ciclo-linea small  { color: #444; }
.rep-nota { color: #666; font-style: italic; }

.rep-ciclo-conector {
  width: 2rem;
  display: flex;
  justify-content: center;
  margin: .15rem 0;
}
.rep-ciclo-conector::before {
  content: '';
  display: block;
  width: 2px;
  height: 1.2rem;
  background: #b7e4ca;
  margin: 0 auto;
}

.rep-ciclo-cobro {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid #b7e4ca;
}
.rep-ciclo-importe {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primario);
}

/* ── Resultado búsqueda cliente externo ──────────── */
.rep-cliente-resultado { cursor: pointer; }
.rep-cliente-resultado:hover { border-color: var(--color-primario); background: #f0f4f8; }

/* ── Aviso fecha futura ──────────────────────────── */
.rep-aviso-futuro {
  background: #fff8e1;
  border: 1.5px solid #f0c040;
  border-radius: var(--radio);
  padding: .75rem 1rem;
  font-size: .92rem;
  color: #7d5a00;
  margin-bottom: 1rem;
  text-align: center;
}
.rep-card-preview {
  text-align: center;
  color: #999;
  font-size: .9rem;
  padding: .5rem 0 .25rem;
  font-style: italic;
}

/* ── Sección "Pendientes de entrega" ─────────────── */
.rep-entrega-titulo { color: #1a6e3f; border-color: #b7e4ca; }
.rep-card-entrega   { border-left: 4px solid #27ae60; }

.rep-seccion-subtitulo {
  font-size: .85rem;
  color: #666;
  margin: -.5rem 0 .75rem;
  padding: 0 .1rem;
}

/* ── Sección "Completadas" colapsable ────────────── */
.rep-seccion-completadas { margin-top: 1.25rem; }

.rep-completadas-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f0f4f0;
  border: 1.5px solid #b7e4ca;
  border-radius: var(--radio);
  padding: .75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1a6e3f;
  cursor: pointer;
  text-align: left;
}
.rep-completadas-toggle:hover { background: #e2f0e6; }
.rep-toggle-icono { font-size: .85rem; margin-left: .5rem; }

.rep-completadas-lista { margin-top: .5rem; }

/* Tarjeta compacta para completadas */
.rep-card-done-mini {
  opacity: .82;
  border-left: 4px solid #27ae60;
  padding: .6rem .85rem;
}
.rep-card-done-mini .rep-card-top { gap: .4rem; }

.rep-parada-done {
  background: #27ae60 !important;
  color: #fff !important;
}

/* Cabecera de pedido/incidencia */
.rep-pedido-header {
  margin-bottom: 1.25rem;
}
.rep-volver {
  display: inline-block;
  color: var(--color-primario);
  text-decoration: none;
  font-size: .9rem;
  margin-bottom: .5rem;
}
.rep-volver:hover { text-decoration: underline; }
.rep-pedido-cliente {
  font-size: 1.3rem;
  color: var(--color-primario);
  margin: 0 0 .35rem;
}

/* Formulario de pedido */
.rep-form-card {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.rep-form-titulo {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-primario);
  margin: 0 0 1rem;
}
.rep-form { display: flex; flex-direction: column; gap: .85rem; }
.rep-form-label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .95rem; }
.rep-form-num {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  padding: .5rem;
  border: 2px solid var(--color-borde);
  border-radius: 8px;
  width: 100%;
}
.rep-form-num:focus { border-color: var(--color-primario); outline: none; }
.rep-form-textarea {
  padding: .5rem .75rem;
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  font-size: 1rem;
  min-height: 70px;
  resize: vertical;
  width: 100%;
}
.rep-importe-preview {
  background: #f0f4f8;
  border-radius: 8px;
  padding: .6rem 1rem;
  font-size: 1rem;
  text-align: center;
}
.rep-importe-preview strong { font-size: 1.4rem; color: var(--color-primario); }
.rep-importe-preview small  { display: block; color: #666; font-size: .82rem; }

.rep-btn-submit {
  display: block;
  width: 100%;
  padding: 1rem;
  background: var(--color-primario);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: .5rem;
}
.rep-btn-submit:hover { background: var(--color-primario-hover); }
.rep-btn-incidencia-submit { background: #e67e22; }
.rep-btn-incidencia-submit:hover { background: #d35400; }

/* Estado actual del pedido */
.rep-estado-actual {
  background: #f8f9fa;
  border-radius: var(--radio);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  font-size: .95rem;
}
.rep-estado-actual p { margin: .3rem 0; }
.rep-completado { background: #e8f8f0; text-align: center; padding: 1.5rem; }

/* Lista de incidencias */
.rep-incidencia-lista { display: flex; flex-direction: column; gap: .4rem; }
.rep-incidencia-opcion {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border: 2px solid var(--color-borde);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  transition: border-color .15s, background .15s;
}
.rep-incidencia-opcion:hover,
.rep-incidencia-opcion:has(input:checked) {
  border-color: var(--color-primario);
  background: #e8f4f8;
}
.rep-incidencia-opcion input { display: none; }

/* ─── Admin v2 ─────────────────────────────────────────── */

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat-card { text-align: center; }
.stat-card .card-titulo { font-size: 1.8rem; }
.stat-alerta { border: 2px solid #e74c3c !important; }
.stat-alerta .card-titulo { color: #c0392b; }
.stat-aviso  { border: 2px solid #f39c12 !important; }
.stat-aviso  .card-titulo { color: #d68910; }

.filtros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem 1rem;
}
.filtros-grid label span { display: block; margin-bottom: .25rem; font-size: .88rem; color: #555; }
.filtros-grid select,
.filtros-grid input[type="date"] {
  width: 100%; padding: .4rem .6rem; font-size: .95rem;
  border: 1px solid var(--color-borde); border-radius: 6px;
}
.filtro-check {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: .5rem;
  padding-top: 1.4rem;
}
.filtro-check input { width: auto; }

.fila-realizada   { background: #f0faf5; }
.fila-incidencia  { background: #fff8f0; }
.fila-urgente     { background: #fff8e1; }
.fila-muy-urgente { background: #fdecea; }

/* ── Resumen "en proceso" repartidor ─────────────── */
.entrega-resumen {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid #b7e4ca;
  border-radius: 12px;
  padding: .9rem 1.1rem;
  margin: .75rem 0 1rem;
  gap: .5rem;
  flex-wrap: wrap;
}
.entrega-resumen-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 4rem;
}
.entrega-resumen-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primario);
  line-height: 1.2;
}
.entrega-resumen-label {
  font-size: .78rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.entrega-resumen-sep {
  width: 1px;
  height: 2.5rem;
  background: var(--color-borde);
}
.entrega-resumen-alerta .entrega-resumen-num { color: #c0392b; }

/* Detalle dentro de tarjeta de entrega pendiente */
.entrega-detalle {
  margin-top: .6rem;
  border-top: 1px solid var(--color-borde);
  padding-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.entrega-detalle-fila {
  display: flex;
  justify-content: space-between;
  font-size: .93rem;
}
.entrega-detalle-fila span { color: #555; }
.entrega-detalle-fila strong { color: var(--color-texto); }
.entrega-detalle-importe strong { font-size: 1.1rem; color: var(--color-primario); }

/* Resumen por repartidor en admin */
.enproceso-por-rep {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1.25rem;
}
.enproceso-rep-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: 8px;
  padding: .6rem 1rem;
  font-size: .93rem;
  flex-wrap: wrap;
}
.enproceso-rep-item strong { flex: 1; min-width: 8rem; }

/* Tarjeta muy urgente */
.rep-card-muyurgente { border-left-color: #c0392b; background: #fdecea; }

.estado-iniciado  { background: #e8f4ff; color: #004085; font-weight: 600; }
.estado-recogido  { background: #fff3cd; color: #7d5a00; font-weight: 600; }
.estado-entregado { background: #d1f2e0; color: #1a6b3a; font-weight: 600; }

/* ─── Mejoras de usabilidad ─────────────────────────────── */

/* Estados con colores más visibles (corrige clase con espacio) */
.estado-pendiente   { background: #fff3cd; color: #7d5a00; font-weight: 600; }
.estado-completado  { background: #d1f2e0; color: #1a6b3a; font-weight: 600; }
.estado-cancelado   { background: #fde8e8; color: #8b1c1c; font-weight: 600; }
.estado-en_progreso { background: #cce5ff; color: #004085; font-weight: 600; }

/* Badge "Sin asignar" en listado de pedidos */
.badge-sin-asignar {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: #fde8e8;
  color: #8b1c1c;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Enlace a Maps en direcciones */
.maps-link {
  color: var(--color-primario);
  text-decoration: none;
  word-break: break-word;
}
.maps-link:hover { text-decoration: underline; }

/* Navegación de días (repartidor) */
.nav-dia-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.btn-nav-dia {
  padding: 0.4rem 0.8rem;
  font-size: 1rem;
  line-height: 1;
}
.filtro-fecha-inline {
  display: flex;
  align-items: center;
}
.filtro-fecha-inline input[type="date"] {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-borde);
  border-radius: 6px;
  font-size: 1rem;
}

/* Barra de progreso del día (repartidor) */
.progreso-dia {
  margin-bottom: 1.25rem;
  background: #fff;
  border-radius: var(--radio);
  padding: 0.75rem 1rem;
  box-shadow: var(--sombra);
}
.progreso-texto {
  display: block;
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.4rem;
  font-weight: 600;
}
.progreso-barra {
  height: 8px;
  background: var(--color-borde);
  border-radius: 4px;
  overflow: hidden;
}
.progreso-fill {
  height: 100%;
  background: var(--color-ok);
  border-radius: 4px;
  transition: width 0.4s ease;
  min-width: 0;
}

/* Badge "Hoy" en card de Liquidación (admin panel) */
.card-hoy-badge {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.1rem 0.5rem;
  background: var(--color-primario);
  color: #fff;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* Precio unitario en form nuevo pedido (cliente) */
.resumen-card small strong {
  color: var(--color-primario);
}

/* ══════════════════════════════════════════════════════════
   ADMIN PANEL — DASHBOARD
   ══════════════════════════════════════════════════════════ */

/* Banda de alertas */
.panel-alertas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}
.panel-alerta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border-radius: 2rem;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s;
}
.panel-alerta:hover { opacity: .82; }
.panel-alerta-rojo    { background: #ffe0e0; color: #c0392b; border: 1.5px solid #e74c3c; }
.panel-alerta-naranja { background: #fff3e0; color: #e67e22; border: 1.5px solid #f39c12; }
.panel-alerta-amarillo{ background: #fffde7; color: #b7900a; border: 1.5px solid #f1c40f; }

/* Pestañas */
.panel-tabs {
  display: flex;
  gap: .35rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: .1rem;
}
.panel-tab {
  background: none;
  border: none;
  padding: .55rem 1.1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  border-radius: .4rem .4rem 0 0;
  transition: background .15s, color .15s;
}
.panel-tab:hover { background: #f4f4f4; color: #333; }
.panel-tab.activo {
  color: var(--color-primario);
  border-bottom: 3px solid var(--color-primario);
  margin-bottom: -2px;
}

/* KPIs */
.panel-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.panel-kpi {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: .75rem;
  padding: 1rem 1.1rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.panel-kpi-num {
  font-size: 1.9rem;
  font-weight: 700;
  color: #222;
  line-height: 1.1;
}
.panel-kpi-sub {
  font-size: .78rem;
  color: #888;
}
.panel-kpi-label {
  font-size: .82rem;
  color: #555;
  margin-top: .1rem;
}
.panel-kpi-link {
  font-size: .8rem;
  color: var(--color-primario);
  text-decoration: none;
  margin-top: auto;
  padding-top: .4rem;
}
.panel-kpi-link:hover { text-decoration: underline; }
.panel-kpi-dinero { border-left: 4px solid #27ae60; }
.panel-kpi-proceso { border-left: 4px solid #e67e22; }

/* Subtítulo de sección dentro del panel */
.panel-subtitulo {
  font-size: 1rem;
  font-weight: 700;
  margin: 1.4rem 0 .6rem;
  color: #333;
}

/* Tabla con variante panel */
.tabla-panel th, .tabla-panel td {
  padding: .55rem .75rem;
  font-size: .9rem;
}
.tabla-panel a { color: var(--color-primario); text-decoration: none; }
.tabla-panel a:hover { text-decoration: underline; }

/* Badge "hoy" / "actual" en tabla */
.badge-hoy {
  display: inline-block;
  background: var(--color-primario);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: .05rem .4rem;
  border-radius: .8rem;
  margin-left: .4rem;
  vertical-align: middle;
}

/* Accesos rápidos */
.panel-accesos {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
}
.panel-acceso {
  background: #f4f6f8;
  border: 1px solid #dde1e7;
  border-radius: .5rem;
  padding: .5rem 1rem;
  font-size: .9rem;
  color: #333;
  text-decoration: none;
  transition: background .15s;
}
.panel-acceso:hover { background: #e8ecf2; }

/* Responsive */
@media (max-width: 640px) {
  .panel-kpis { grid-template-columns: repeat(2, 1fr); }
  .panel-tab  { padding: .5rem .75rem; font-size: .9rem; }
}

/* ══════════════════════════════════════════════════════════
   RUTA PARADAS — DRAG & DROP
   ══════════════════════════════════════════════════════════ */

.paradas-hint {
  font-size: .88rem;
  color: #888;
  margin: -.25rem 0 .75rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.paradas-hint-icon { font-size: 1.1rem; }

.sortable-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.parada-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: #fff;
  border: 1px solid #e2e6ea;
  border-radius: .6rem;
  padding: .7rem .9rem;
  transition: box-shadow .15s;
  cursor: default;
}
.parada-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }

.parada-handle {
  font-size: 1.25rem;
  color: #bbb;
  cursor: grab;
  padding: 0 .1rem;
  user-select: none;
  flex-shrink: 0;
  touch-action: none;   /* necesario para touch drag */
}
.parada-handle:active { cursor: grabbing; }

.parada-num {
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-primario, #1a3a5c);
  border-radius: 50%;
  min-width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.parada-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.parada-cliente { font-size: .95rem; }
.parada-dir     { color: #888; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.parada-acciones {
  display: flex;
  gap: .4rem;
  align-items: center;
  flex-shrink: 0;
}

/* Estado mientras se arrastra */
.parada-dragging {
  opacity: .45;
  border: 2px dashed var(--color-primario, #1a3a5c) !important;
}
.parada-chosen {
  box-shadow: 0 4px 16px rgba(0,0,0,.18) !important;
  z-index: 99;
}

/* Toast "Orden guardado" */
.orden-guardado-msg {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #27ae60;
  color: #fff;
  padding: .55rem 1.1rem;
  border-radius: 2rem;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 3px 12px rgba(0,0,0,.18);
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

@media (max-width: 640px) {
  .parada-item { flex-wrap: wrap; }
  .parada-acciones { width: 100%; justify-content: flex-end; margin-top: .25rem; }
}

/* Frecuencia de visita por parada (semanal / quincenal / etc.) */
.parada-frecuencia { margin-top: .2rem; }
.badge-frecuencia {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
  list-style: none;
  font-size: .78rem;
  font-weight: 600;
  color: #888;
  background: #f1f2f4;
  border-radius: .4rem;
  padding: .15rem .5rem;
  user-select: none;
}
.badge-frecuencia::-webkit-details-marker { display: none; }
.badge-frecuencia.activa { background: #eaf1fb; color: #1a5276; }
.badge-frecuencia .toca-si { color: #1a6b3a; }
.badge-frecuencia .toca-no { color: #8b1c1c; }

.frecuencia-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem;
  margin-top: .5rem;
  padding: .6rem .7rem;
  background: #f8f9fa;
  border: 1px solid #e2e6ea;
  border-radius: .5rem;
}
.frecuencia-form label {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  font-size: .78rem;
  color: #666;
}

.rep-badge-credito {
  background: #d6eaf8;
  color: #1a5276;
  border-radius: .4rem;
  padding: .1rem .5rem;
  font-size: .78rem;
  font-weight: 600;
}

.rep-mismodia-titulo { color: #7d3c98; }
.rep-seccion-mismodia > summary { opacity: .85; }
.rep-card-mismodia { border-left: 3px solid #a569bd; }
.rep-badge-mismodia {
  background: #f0e6f8;
  color: #7d3c98;
  border-radius: .4rem;
  padding: .1rem .5rem;
  font-size: .78rem;
  font-weight: 600;
}

.mochila-bloqueo-aviso {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #fdedec;
  border: 2px solid #e74c3c;
  border-radius: .6rem;
  padding: .75rem 1rem;
  font-weight: 600;
  color: #922b21;
  margin-bottom: .75rem;
}
.mochila-bloqueo-aviso a {
  color: #922b21;
  text-decoration: underline;
}

.rep-cobro-credito-aviso {
  font-size: .85rem;
  color: #1a5276;
  background: #d6eaf8;
  border-radius: .4rem;
  padding: .3rem .75rem;
  margin: .1rem 0 .4rem;
}

/* Aviso cobro pendiente en formulario de entrega */
.rep-aviso-pendiente {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #fff8e1;
  border: 1.5px solid #f39c12;
  border-radius: .5rem;
  padding: .7rem 1rem;
  font-size: .9rem;
  color: #7d5a00;
  margin: .25rem 0;
}

/* ══════════════════════════════════════════════════════════
   COBROS PENDIENTES
   ══════════════════════════════════════════════════════════ */

.cobpend-por-rep {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
}
.cobpend-rep-chip {
  display: flex;
  flex-direction: column;
  background: #f4f6f8;
  border: 1.5px solid #dde1e7;
  border-radius: .6rem;
  padding: .45rem .85rem;
  font-size: .85rem;
  text-decoration: none;
  color: #333;
  cursor: default;
}
.cobpend-rep-chip span { color: #e67e22; font-weight: 700; }

.cobpend-lista {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.cobpend-card {
  background: #fff;
  border: 1.5px solid #e2e6ea;
  border-radius: .75rem;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.cobpend-aviso   { border-left: 4px solid #f39c12; }
.cobpend-urgente { border-left: 4px solid #e74c3c; background: #fff8f8; }

.cobpend-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}
.cobpend-cliente {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a3a5c;
}
.cobpend-importe {
  font-size: 1.15rem;
  font-weight: 700;
  color: #27ae60;
  white-space: nowrap;
}

.cobpend-meta {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.cobpend-fechas {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  font-size: .84rem;
  color: #555;
  align-items: center;
}
.cobpend-dias         { font-weight: 600; }
.cobpend-dias-naranja { color: #e67e22; }
.cobpend-dias-rojo    { color: #e74c3c; }

/* Registrar cobro (details/summary) */
.cobpend-cobrar-details { margin-top: .25rem; }
.cobpend-cobrar-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #eafaf1;
  border: 1.5px solid #27ae60;
  border-radius: .5rem;
  padding: .45rem .9rem;
  font-size: .9rem;
  font-weight: 600;
  color: #1e8449;
  cursor: pointer;
  list-style: none;
}
.cobpend-cobrar-btn::-webkit-details-marker { display: none; }
.cobpend-cobrar-form {
  margin-top: .6rem;
  padding: .75rem;
  background: #f8f9fa;
  border-radius: .5rem;
}

.cobpend-ver-pedido {
  font-size: .82rem;
  color: #888;
  text-decoration: none;
  align-self: flex-end;
}
.cobpend-ver-pedido:hover { color: var(--color-primario); text-decoration: underline; }

/* Select mini para filtros */
.form-select-mini {
  padding: .4rem .7rem;
  border: 1px solid #dde1e7;
  border-radius: .4rem;
  font-size: .9rem;
  background: #fff;
}

@media (max-width: 640px) {
  .cobpend-card-top { flex-direction: column; }
  .cobpend-importe  { font-size: 1.3rem; }
}

/* ══════════════════════════════════════════════════════════
   MOCHILA CONTROL
   ══════════════════════════════════════════════════════════ */

/* Banner aviso en index repartidor */
.mochila-aviso-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: #fff8e1;
  border: 1.5px solid #f39c12;
  border-radius: .6rem;
  padding: .7rem 1rem;
  margin-bottom: .9rem;
  font-size: .92rem;
  color: #7d5a00;
  text-decoration: none;
  text-align: center;
}
.mochila-aviso-banner:hover { background: #fff3cd; }
.mochila-aviso-cerrar { background: #eafaf1; border-color: #27ae60; color: #1e6e3e; }
.mochila-aviso-cerrar:hover { background: #d5f5e3; }

/* Página mochila.php */
.mochila-card { text-align: center; }
.mochila-icono { font-size: 3rem; margin-bottom: .5rem; }
.mochila-desc  { color: #666; font-size: .9rem; margin-bottom: 1rem; }

.mochila-estado {
  background: #fff;
  border: 1.5px solid #e2e6ea;
  border-radius: .75rem;
  overflow: hidden;
  margin-bottom: 1rem;
}
.mochila-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1.1rem;
  border-bottom: 1px solid #f0f0f0;
  font-size: .95rem;
}
.mochila-fila:last-child { border-bottom: none; }
.mochila-fila-label { color: #555; }
.mochila-fila-valor { font-size: 1.4rem; font-weight: 700; color: #1a3a5c; }
.mochila-fila-resta .mochila-fila-valor { color: #e67e22; }
.mochila-fila-suma  .mochila-fila-valor { color: #27ae60; }
.mochila-fila-total { background: #f8f9fa; }
.mochila-fila-total .mochila-fila-valor { font-size: 1.7rem; }

.mochila-diferencia {
  margin: .75rem 1.1rem;
  padding: .65rem 1rem;
  border-radius: .5rem;
  font-size: .95rem;
  text-align: center;
}
.mochila-ok       { background: #eafaf1; color: #1e6e3e; }
.mochila-perdida  { background: #fdf0f0; color: #c0392b; border: 1.5px solid #e74c3c; }
.mochila-sobrante { background: #fff8e1; color: #7d5a00; }

.mochila-notas {
  padding: .5rem 1.1rem .75rem;
  font-size: .85rem;
  color: #888;
}

/* Select inline reasignación repartidor (en-proceso admin) */
.reasignar-select {
  padding: .3rem .5rem;
  font-size: .85rem;
  border: 1.5px solid #dde1e7;
  border-radius: .4rem;
  background: #fff;
  cursor: pointer;
  max-width: 140px;
}
.reasignar-select:focus { border-color: var(--color-primario); outline: none; }

/* ══════════════════════════════════════════════════════════
   FIRMA DIGITAL
   ══════════════════════════════════════════════════════════ */

.firma-bloque {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: .5rem 0;
}
.firma-label {
  font-size: .9rem;
  font-weight: 600;
  color: #333;
}
.firma-canvas-wrap {
  border: 2px dashed #aac;
  border-radius: .6rem;
  background: #fff;
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
}
.firma-canvas-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
}
.firma-acciones {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.firma-estado {
  font-size: .85rem;
  color: #888;
}
.firma-img-preview {
  max-width: 100%;
  border: 1px solid #e2e6ea;
  border-radius: .5rem;
  background: #fff;
  padding: .4rem;
  margin-top: .25rem;
}
.rep-ciclo-firma {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .75rem 1rem;
  border-top: 1px solid #f0f0f0;
  margin-top: .25rem;
}

/* ── Secciones colapsables (repartidor index) ──────────── */
.rep-seccion-colapsable { border: none; padding: 0; margin: 0; }
.rep-seccion-colapsable > summary {
  cursor: pointer;
  user-select: none;
  list-style: inside disclosure-closed;
}
.rep-seccion-colapsable[open] > summary {
  list-style: inside disclosure-open;
}
.rep-seccion-colapsable > summary::-webkit-details-marker {
  font-size: 1.1rem;
  color: var(--color-secundario);
}
.rep-seccion-colapsable > summary::marker {
  font-size: 1.1rem;
  color: var(--color-secundario);
}
.rep-seccion-header {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .1rem 0;
}
.rep-seccion-header .rep-seccion-titulo { margin: 0; }

/* ── Auditoría del pedido ───────────────────────────────── */
.auditoria-bloque {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: .75rem;
  padding: 1rem 1.25rem 1.25rem;
  margin: 0 auto 1.25rem;
  max-width: 820px;
}
.auditoria-titulo {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primario);
  margin: 0 0 1rem;
}
.auditoria-linea {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.auditoria-linea::before {
  content: '';
  position: absolute;
  left: 1.1rem;
  top: .6rem;
  bottom: .6rem;
  width: 2px;
  background: var(--color-borde);
}
.auditoria-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .55rem 0;
  position: relative;
}
.auditoria-icono {
  font-size: 1.2rem;
  line-height: 1.5;
  flex-shrink: 0;
  width: 2.2rem;
  text-align: center;
  background: var(--color-fondo);
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.auditoria-detalle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .6rem;
  font-size: .88rem;
  line-height: 1.5;
}
.auditoria-detalle strong {
  font-size: .93rem;
  color: var(--color-texto);
  width: 100%;
}
.auditoria-fecha {
  background: #e9f0f7;
  color: #1a3a52;
  border-radius: .3rem;
  padding: .05rem .4rem;
  font-size: .82rem;
  font-weight: 600;
}
.auditoria-quien {
  color: #555;
  font-style: italic;
  font-size: .85rem;
}
.auditoria-extra {
  width: 100%;
  color: #666;
  font-size: .83rem;
}
.auditoria-nota {
  color: #888;
  font-style: italic;
}
.auditoria-cobrado {
  color: #27ae60;
  font-weight: 600;
}
.auditoria-pendiente-cobro {
  color: #e67e22;
  font-weight: 600;
}
.auditoria-pendiente .auditoria-detalle strong {
  color: #aaa;
}

/* ─── Turnos: calendario semanal arrastrable ──────────────── */

.turno-pool {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: .75rem;
  background: #f4f6f8;
  border: 1px dashed var(--color-borde);
  border-radius: var(--radio);
  min-height: 3rem;
}

.turno-chip {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  padding: .3rem .4rem .3rem .75rem;
  font-size: .85rem;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  user-select: none;
}

.turno-chip-nombre { white-space: nowrap; }

.turno-chip-quitar {
  border: none;
  background: #f1f1f1;
  color: #888;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  line-height: 1;
  cursor: pointer;
  font-size: .9rem;
}
.turno-chip-quitar:hover { background: #e74c3c; color: #fff; }

#pool-personal .turno-chip-quitar { display: none; }

.turno-chip-arrastrando { opacity: .4; }

.turnos-grid-scroll {
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.turnos-grid {
  display: grid;
  gap: 2px;
  background: var(--color-borde);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  overflow: hidden;
  min-width: 900px;
}

.turnos-grid-celda {
  background: #fff;
  padding: .5rem;
  min-height: 3.5rem;
}

.turnos-grid-cabecera {
  background: #f8f9fa;
  font-weight: 600;
  text-align: center;
  font-size: .85rem;
  padding: .6rem .5rem;
  min-height: auto;
}

.turnos-grid-hoy {
  background: #e8f4fd;
  color: #1a5a8a;
}

.turnos-grid-turno-label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1rem;
  background: #fafbfc;
}
.turnos-grid-turno-label small { color: #888; }

.turno-celda {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 3.2rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.turno-celda .turno-chip { cursor: grab; }

.turno-chip-solo-lectura {
  cursor: default;
  padding: .3rem .75rem;
}
.turno-chip-yo {
  background: #eaf6ec;
  border-color: #27ae60;
  font-weight: 700;
}