/* estilos.css — La bandeja de Doña Sol. Pensada primero para el celular. */

:root {
  --rojo: #E50F17;
  --rojo-oscuro: #A80B10;
  --rojo-suave: #FDECEC;
  --amarillo: #FFCC00;
  --amarillo-suave: #FFF7D6;
  --verde: #1E7B34;
  --azul: #33507A;
  --texto: #1F1F1F;
  --gris: #666666;
  --borde: #E3E3E3;
  --fondo: #F5F5F2;
  --radio: 12px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}

/* ---------- Cabecera roja (se va al bajar; las pestañas quedan fijas) ---------- */

.cabecera-roja {
  background: var(--rojo);
  color: #fff;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  border-bottom: 4px solid var(--amarillo);
}

.fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; max-width: 760px; margin: 0 auto; }

/* El logo es una foto con el mismo rojo de fondo que la cabecera: se funde. */
.marca { display: flex; align-items: center; gap: 10px; margin: 0; }
.marca .logo { display: block; width: auto; height: 50px; margin: -4px 0 -4px -6px; }
.marca span { padding-left: 10px; border-left: 2px solid rgba(255, 255, 255, .35); color: var(--amarillo); font-size: 14px; font-weight: 700; line-height: 1.2; }

.acciones { display: flex; gap: 6px; }

.boton-chico {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 8px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.contadores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-width: 760px; margin: 10px auto 0; }

.contador { display: flex; flex-direction: column; min-width: 0; padding: 6px 10px 7px; border-radius: 10px; background: rgba(255, 255, 255, .14); line-height: 1.15; }
.contador b { font-size: 22px; font-variant-numeric: tabular-nums; }
.contador small { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
.contador.alerta { background: rgba(255, 255, 255, .26); }
.contador.peligro { background: var(--amarillo); color: var(--rojo-oscuro); }

/* ---------- Pestañas (fijas arriba) ---------- */

.barra-de-pestanas { position: sticky; top: 0; z-index: 10; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }

.pestanas { display: flex; gap: 2px; max-width: 760px; margin: 0 auto; padding: 0 8px; overflow-x: auto; }

.pestana {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 12px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--gris);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.pestana.activa { border-bottom-color: var(--rojo); color: var(--rojo); }

.numerito {
  display: inline-block;
  min-width: 22px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--borde);
  color: var(--texto);
  font-size: 12px;
  text-align: center;
}
.pestana.activa .numerito { background: var(--rojo); color: #fff; }

/* ---------- Avisos generales ---------- */

.aviso-modo, .error-general { max-width: 736px; margin: 12px auto 0; padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.aviso-modo { border: 1px solid var(--amarillo); background: var(--amarillo-suave); }
.aviso-modo.modo-auto { border-color: #BFE0C6; background: #EEF8F0; }
.error-general { border: 1px solid #F3B4B6; background: var(--rojo-suave); color: var(--rojo-oscuro); }

main { max-width: 760px; margin: 0 auto; padding: 12px 12px calc(32px + env(safe-area-inset-bottom)); }

.vacio { padding: 32px 0; color: var(--gris); text-align: center; }
.vacio p { margin: 4px 0; }
.vacio .titulo-vacio { color: var(--texto); font-size: 18px; font-weight: 700; }
.foto-vacio { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto 16px; border-radius: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }

/* ---------- Tarjetas ---------- */

.tarjeta {
  margin: 0 0 12px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 2px 6px rgba(0, 0, 0, .06);
  overflow-wrap: anywhere;
}
.tarjeta.resaltada { outline: 3px solid var(--amarillo); outline-offset: 2px; }

.tarjeta-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }

/* La raya del costado dice el canal sin tener que leer. */
.tarjeta.de-whatsapp { border-left: 4px solid var(--verde); }
.tarjeta.de-mail { border-left: 4px solid var(--azul); }

.icono { flex: 0 0 auto; width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.canal { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; color: #fff; font-weight: 700; }
.canal-mail { background: var(--azul); }
.canal-whatsapp { background: var(--verde); }

/* Etiquetas: fondo suave y letra oscura del mismo color. */
.etiqueta { padding: 2px 8px; border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); font-weight: 600; }
.etiqueta.prioridad-urgente { border-color: var(--rojo); background: var(--rojo); color: #fff; font-weight: 700; }

.tipo-cotizacion, .tipo-lista_precios { border-color: #F1DE94; background: var(--amarillo-suave); color: #7A5B00; }
.tipo-pedido { border-color: #BFE0C6; background: #EAF6ED; color: var(--verde); }
.tipo-consulta_producto { border-color: #C5D3E8; background: #EDF2F9; color: var(--azul); }
.tipo-reclamo, .tipo-error { border-color: #F3B4B6; background: var(--rojo-suave); color: var(--rojo-oscuro); }
.tipo-proveedor { border-color: #D9C8EA; background: #F4EEF9; color: #5B3A86; }
.tipo-factura_cobranza { border-color: #C3E0E0; background: #EDF6F6; color: #1F6464; }
.tipo-publicidad, .tipo-otro { color: var(--gris); }
.tipo-sin-analizar { border-style: dashed; color: var(--gris); }

.est-enviado, .est-resuelto, .est-respondido_solo { border-color: #BFE0C6; background: #EAF6ED; color: var(--verde); }
.est-aviso { border-color: #D3DAE4; background: #F0F3F7; color: #4A5568; }
.est-descartado, .est-ignorado, .est-archivado { color: var(--gris); }

.tarea-est-pendiente { border-color: #F1DE94; background: var(--amarillo-suave); color: #7A5B00; }
.tarea-est-en_curso { border-color: #C5D3E8; background: #EDF2F9; color: var(--azul); }
.tarea-est-hecha { border-color: #BFE0C6; background: #EAF6ED; color: var(--verde); }

/* Las etiquetas chicas de abajo de la cabecera. */
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
.chip { padding: 1px 8px; border-radius: 999px; background: var(--fondo); color: var(--gris); font-size: 12px; font-weight: 600; }
.chip-ia { background: #F4EEF9; color: #5B3A86; }
.chip-especial { background: var(--amarillo-suave); color: #7A5B00; }
.chip-nuevo { background: #EDF2F9; color: var(--azul); }

/* ---------- Selector de canal (WhatsApp / Mail / Todos) ---------- */

.selector-canal { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }

.opcion-canal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #CDCDCD;
  border-radius: 999px;
  background: #fff;
  color: var(--texto);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.opcion-canal .numerito { margin-left: 0; }
.opcion-canal.activa { border-color: var(--texto); background: var(--texto); color: #fff; }
.opcion-canal.opcion-whatsapp.activa { border-color: var(--verde); background: var(--verde); }
.opcion-canal.opcion-mail.activa { border-color: var(--azul); background: var(--azul); }
.opcion-canal.activa .numerito { background: rgba(255, 255, 255, .25); color: #fff; }

.titulo-canal { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 13px; letter-spacing: .4px; text-transform: uppercase; }
.selector-canal + .titulo-canal { margin-top: 4px; }
.titulo-canal::after { content: ''; flex: 1; height: 1px; background: var(--borde); }
.titulo-canal .numerito { margin-left: 0; }
.titulo-whatsapp { color: var(--verde); }
.titulo-mail { color: var(--azul); }

.cuando { margin-left: auto; color: var(--gris); }
.cuando.vencida { color: var(--rojo); font-weight: 700; }

.de { margin: 8px 0 2px; color: var(--gris); font-size: 14px; }

.remitente { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; }
.avatar { display: grid; flex: 0 0 38px; place-items: center; height: 38px; border-radius: 50%; background: var(--azul); color: #fff; font-weight: 800; }
.avatar.canal-whatsapp { background: var(--verde); }
.quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.quien b { font-size: 15px; }
.quien small { color: var(--gris); font-size: 13px; }

/* ---------- La cotización, con las fotos de los productos ---------- */

.cotizacion { margin: 10px 0; padding: 10px 12px 12px; border: 1px solid #F1DE94; border-radius: 12px; background: var(--amarillo-suave); }
.cotizacion-titulo { margin: 0 0 4px; color: var(--rojo-oscuro); font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.lineas { margin: 0; padding: 0; list-style: none; }
.linea { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; padding: 7px 0; }
.linea + .linea { border-top: 1px solid rgba(0, 0, 0, .07); }
.foto-producto { display: block; width: 48px; height: 48px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); object-fit: cover; }
.foto-producto.sin-foto { padding: 9px; }
.linea-nombre { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.linea-nombre b { font-size: 15px; }
.linea-nombre small { color: var(--gris); font-size: 13px; }
.linea-subtotal { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cotizacion-total { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 0; padding-top: 8px; border-top: 2px solid var(--amarillo); }
.cotizacion-total b { color: var(--rojo); font-size: 19px; font-variant-numeric: tabular-nums; }
.resumen, .que-hacer { margin: 0 0 8px; font-size: 17px; font-weight: 700; }
.que-hacer { margin-top: 8px; font-size: 16px; }
.detalle { margin: 4px 0; color: var(--gris); font-size: 14px; }

.motivos { margin: 0 0 8px; padding: 8px 10px 8px 28px; border-radius: 8px; background: var(--rojo-suave); color: var(--rojo-oscuro); font-size: 14px; }
.motivos li + li { margin-top: 2px; }

.nota-modo { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: var(--amarillo-suave); font-size: 14px; }
.aviso-prueba { margin: 0 0 8px; padding: 6px 10px; border: 1px dashed var(--rojo); border-radius: 8px; color: var(--rojo-oscuro); font-size: 14px; font-weight: 600; }

.tarea.urgente { border-left: 5px solid var(--rojo); }
.tarea.vencida { background: #FFFBFB; }
.tarea-hecha { opacity: .75; }

details { margin: 8px 0; }
summary { min-height: 32px; color: var(--rojo); font-weight: 600; cursor: pointer; }

.texto-original {
  margin: 6px 0 0;
  padding: 10px;
  border-radius: 8px;
  background: var(--fondo);
  font-family: inherit;
  font-size: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pdf { display: inline-block; margin: 6px 12px 0 0; color: var(--azul); font-weight: 600; }

/* ---------- Adjuntos que mandó el cliente ---------- */

.adjuntos { margin: 10px 0; }
.adjuntos-titulo { margin: 0 0 6px; color: var(--gris); font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.adjuntos-lista { display: flex; flex-wrap: wrap; gap: 8px; }

.adjunto-foto { display: block; width: 96px; height: 96px; overflow: hidden; border-radius: 10px; background: var(--fondo); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.adjunto-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }

.adjunto-archivo {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: #fff;
  color: var(--azul);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.adjunto-archivo small { color: var(--gris); font-size: 12px; font-weight: 400; }
.adjunto-archivo audio { width: 240px; max-width: 100%; height: 36px; }
.adjunto-archivo.sin-guardar { border-style: dashed; color: var(--gris); }

/* ---------- Formularios y botones ---------- */

.editor { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--borde); }
.titulo-editor { margin: 0 0 6px; color: var(--gris); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }

.campo { display: block; margin: 0 0 10px; }
.campo > span { display: block; margin-bottom: 4px; color: var(--gris); font-size: 13px; }

/* 16px en los campos: con menos, el iPhone hace zoom al tocarlos. */
input[type="text"], input[type="password"], input[type="date"], input:not([type]), select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #CDCDCD;
  border-radius: 8px;
  background: #fff;
  color: var(--texto);
  font: inherit;
  font-size: 16px;
}
textarea { min-height: 240px; line-height: 1.4; resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 1px; }

.adjunto { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 15px; }
.adjunto input { width: 22px; height: 22px; }
.adjunto .pdf { margin: 0; }

.botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #CDCDCD;
  border-radius: 10px;
  background: #fff;
  color: var(--texto);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.boton.principal { border-color: var(--rojo); background: var(--rojo); color: #fff; }
.boton.confirmar { border-color: var(--rojo-oscuro); color: var(--rojo-oscuro); }
.boton.ancho { width: 100%; }
.boton:disabled { opacity: .5; cursor: default; }

.resultado { min-height: 1em; margin: 6px 0 0; color: var(--rojo-oscuro); font-size: 14px; }

.zona-nota { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

/* ---------- Pestaña de tareas ---------- */

.barra-tareas { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; margin-bottom: 12px; }
.barra-tareas .nueva-tarea { flex: 1 1 100%; margin: 0; }

.filtros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
.filtros .campo { margin: 0; }

.notas { margin: 6px 0; padding-left: 20px; color: var(--gris); font-size: 14px; }
.pedido { margin: 0 0 8px; padding-left: 20px; font-size: 15px; }

.numeros p { margin: 4px 0; font-size: 14px; }

@media (max-width: 480px) {
  .filtros { grid-template-columns: 1fr 1fr; }
  .marca span { display: none; }
  .contador { padding: 5px 8px 6px; }
  .contador b { font-size: 19px; }
  .contador small { font-size: 11px; }
  .pestanas { padding: 0 4px; }
  .pestana { padding: 0 7px; font-size: 14px; }
  .numerito { min-width: 18px; margin-left: 4px; padding: 0 5px; font-size: 11px; }
  .solo-pantalla-ancha { display: none; }
}

/* ---------- Conectar WhatsApp (/bandeja/whatsapp) ---------- */

.alta h1 { margin: 8px 0 6px; font-size: 22px; line-height: 1.2; }
.pasos { margin: 12px 0; padding-left: 22px; }
.pasos li { margin-bottom: 8px; }
.resultado.neutro { color: var(--gris); }
.resultado.ok { color: var(--verde); font-weight: 600; }
.ultima-alta { margin-top: 16px; }
.ultima-alta dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 6px 0 0; font-size: 14px; }
.ultima-alta dt { color: var(--gris); }
.ultima-alta dd { margin: 0; }
a.boton-chico { display: inline-flex; align-items: center; text-decoration: none; }

/* ---------- Política de privacidad (pública) ---------- */

.cabecera-privacidad {
  display: flex;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  background: var(--rojo);
  border-bottom: 4px solid var(--amarillo);
}

.cabecera-privacidad img { display: block; width: 120px; height: auto; }

.texto-privacidad {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px max(32px, env(safe-area-inset-bottom));
}

.texto-privacidad h1 { margin: 0 0 4px; font-size: 1.6rem; }
.texto-privacidad h2 { margin: 28px 0 8px; font-size: 1.15rem; color: var(--rojo-oscuro); }
.texto-privacidad .fecha { margin: 0 0 20px; color: var(--gris); font-size: .9rem; }
.texto-privacidad ul { padding-left: 22px; }
.texto-privacidad li { margin-bottom: 6px; }
.texto-privacidad a { color: var(--azul); }

/* ---------- Página para entrar ---------- */

.pagina-entrar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  background: var(--rojo);
}

/* El logo tiene el mismo rojo de fondo que la página. */
.logo-entrar { display: block; width: 150px; height: auto; }

.caja-entrar {
  width: 100%;
  max-width: 380px;
  overflow: hidden;
  padding: 22px 22px 0;
  border-top: 6px solid var(--amarillo);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
}

.titulo-entrar { margin: 0; font-size: 22px; line-height: 1.2; }
.subtitulo { margin: 4px 0 18px; color: var(--gris); font-size: 15px; }

/* La fila de productos del flyer, de borde a borde al pie de la caja. */
.productos-entrar { display: block; width: calc(100% + 44px); max-width: none; height: auto; margin: 22px -22px 0; }

.slogan { margin: 6px 0 0; color: var(--amarillo); font-size: 17px; font-style: italic; font-weight: 800; letter-spacing: .2px; }

.error { color: var(--rojo-oscuro); font-size: 14px; }