/* CRM Gambito — paleta de la marca: oliva, navy y crema.
   Playfair Display para la marca y los titulos, DM Sans para todo lo demas. */

:root {
  --oliva:        #4a5d2a;
  --oliva-claro:  #6b8340;
  --oliva-suave:  #eef1e7;
  --navy:         #0f1b3d;
  --crema:        #f3efe8;
  --papel:        #fbf9f6;
  --blanco:       #ffffff;
  --tinta:        #1c2333;
  --tinta-suave:  #6b7280;
  --borde:        #e3ded4;
  --oro:          #b08d35;
  --alerta:       #a33a2a;
  --alerta-suave: #f7ece9;
  --verde:        #2f7a4f;
  --ambar:        #9a6b16;

  --r-chico: 6px;
  --r:       10px;
  --r-grande:14px;
  --sombra:  0 1px 2px rgba(15,27,61,.06), 0 4px 12px rgba(15,27,61,.05);
  --sombra-alta: 0 8px 28px rgba(15,27,61,.14);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

.contenedor {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------------- marca */

.marca {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: .04em;
  color: var(--navy);
  margin: 0;
}
.marca-sub {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 2px 0 26px;
}
.marca-chica {
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .03em;
  color: var(--navy);
}
.etiqueta-crm {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oliva);
  border: 1px solid var(--oliva);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: 3px;
}

/* ---------------------------------------------------------------- login */

.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(1100px 500px at 50% -10%, #ffffff 0%, var(--crema) 62%);
}
.login-caja {
  width: 100%;
  max-width: 380px;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r-grande);
  box-shadow: var(--sombra-alta);
  padding: 34px 30px 30px;
  text-align: left;
}
.login-caja h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 21px;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--navy);
}
.login-caja .btn { width: 100%; margin-top: 20px; }

/* ---------------------------------------------------------------- cabecera */

.cabecera {
  background: var(--blanco);
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  z-index: 40;
}
.cabecera-fila {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cabecera-acciones { display: flex; gap: 6px; }
.principal { padding: 24px 20px 64px; display: grid; gap: 26px; }

/* ---------------------------------------------------------------- controles */

.btn {
  font: inherit;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--r-chico);
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
  white-space: nowrap;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn-primario { background: var(--oliva); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--oliva-claro); }
.btn-fantasma { background: transparent; color: var(--tinta); border-color: var(--borde); }
.btn-fantasma:hover { background: var(--oliva-suave); border-color: var(--oliva-claro); }
.btn-peligro { background: var(--alerta); color: #fff; }
.btn-peligro:hover { filter: brightness(1.08); }
.btn-icono {
  background: transparent;
  border-color: var(--borde);
  padding: 4px 11px;
  font-size: 18px;
  line-height: 1.1;
  color: var(--tinta);
}
.btn-icono:hover { background: var(--oliva-suave); }

label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tinta-suave);
  margin: 14px 0 5px;
}
input, textarea, select {
  font: inherit;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--borde);
  border-radius: var(--r-chico);
  background: var(--blanco);
  color: var(--tinta);
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--oliva-claro);
  outline-offset: -1px;
  border-color: var(--oliva-claro);
}
input[type="color"] { padding: 2px; width: 46px; height: 38px; cursor: pointer; }
textarea { resize: vertical; }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.error {
  color: var(--alerta);
  background: var(--alerta-suave);
  border: 1px solid #e8cdc6;
  border-radius: var(--r-chico);
  padding: 8px 11px;
  font-size: 13px;
  margin: 14px 0 0;
}
.sub { color: var(--tinta-suave); font-size: 13px; margin: 0 0 12px; }

/* ---------------------------------------------------------------- kpis */

.resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.tarjeta-kpi {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  box-shadow: var(--sombra);
}
.tarjeta-kpi-click { cursor: pointer; }
.tarjeta-kpi-click:hover { border-color: var(--alerta); }
.kpi-icono {
  width: 38px; height: 38px;
  border-radius: 999px;
  flex-shrink: 0;
  background: var(--oliva-suave);
  position: relative;
}
.kpi-icono::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--glifo) no-repeat center / 19px 19px;
          mask: var(--glifo) no-repeat center / 19px 19px;
}
.ico-activos {
  color: var(--oliva);
  --glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/%3E%3C/svg%3E");
}
.ico-plata {
  color: var(--verde);
  background: #e8f2ec;
  --glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='2' x2='12' y2='22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");
}
.ico-total {
  color: var(--navy);
  background: #e8ecf5;
  --glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}
.ico-descartado {
  color: var(--alerta);
  background: var(--alerta-suave);
  --glifo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='15' y1='9' x2='9' y2='15'/%3E%3Cline x1='9' y1='9' x2='15' y2='15'/%3E%3C/svg%3E");
}

.kpi-valor {
  font-size: 23px;
  font-weight: 700;
  margin: 0;
  color: var(--navy);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.kpi-nombre { font-size: 12px; color: var(--tinta-suave); margin: 1px 0 0; }

/* ---------------------------------------------------------------- bloques */

.bloque { display: grid; gap: 14px; }
.bloque-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.bloque-encabezado h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  color: var(--navy);
}
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 18px;
  box-shadow: var(--sombra);
}

/* ---------------------------------------------------------------- filtro */

.filtro-etiquetas { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.pildora {
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--borde);
  background: var(--blanco);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tinta);
}
.pildora:hover { border-color: var(--oliva-claro); }
.pildora[aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.punto { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; }

/* ---------------------------------------------------------------- tablero */

.tablero {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 14px;
  align-items: flex-start;
  scrollbar-width: thin;
}
.columna {
  width: 300px;
  flex-shrink: 0;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 12px;
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 130px;
}
.columna.recibiendo {
  border-color: var(--oliva);
  background: var(--oliva-suave);
  box-shadow: inset 0 0 0 1px var(--oliva);
}
.columna-encabezado {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.columna-titulo {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy);
  border: none;
  background: transparent;
  padding: 2px 4px;
  border-radius: 4px;
  width: 100%;
}
.columna-titulo:hover { background: var(--oliva-suave); }
.columna-titulo:focus { background: #fff; outline: 2px solid var(--oliva-claro); }
.columna-meta {
  font-size: 11px;
  color: var(--tinta-suave);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.columna.descartada .columna-titulo { color: var(--alerta); }
.marca-descarte {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--alerta);
  border: 1px solid #e8cdc6;
  background: var(--alerta-suave);
  border-radius: 999px;
  padding: 1px 7px;
}
.zona-cartas { display: grid; gap: 9px; min-height: 18px; }

/* ---------------------------------------------------------------- tarjeta */

.carta {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-left: 4px solid transparent;
  border-radius: var(--r-chico);
  padding: 11px;
  display: grid;
  gap: 8px;
  box-shadow: var(--sombra);
  touch-action: manipulation;
}
.carta.arrastrando { opacity: .35; }
.carta-fantasma {
  position: fixed;
  z-index: 999;
  width: 276px;
  pointer-events: none;
  box-shadow: var(--sombra-alta);
  transform: rotate(1.4deg);
  margin: 0;
}
.carta-fila { display: flex; align-items: flex-start; gap: 7px; }
.asa {
  cursor: grab;
  color: var(--tinta-suave);
  font-size: 15px;
  line-height: 1;
  padding: 2px 1px;
  background: none;
  border: none;
  touch-action: none;
  flex-shrink: 0;
}
.asa:active { cursor: grabbing; }
.carta-nombre {
  font-weight: 500;
  font-size: 13.5px;
  margin: 0;
  overflow-wrap: anywhere;
}
.carta-cliente { font-size: 12px; color: var(--tinta-suave); margin: 1px 0 0; }
.carta-acciones { display: flex; gap: 2px; margin-left: auto; flex-shrink: 0; }
.mini {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--tinta-suave);
  line-height: 1;
}
.mini:hover { background: var(--oliva-suave); color: var(--tinta); }
.mini-peligro:hover { background: var(--alerta-suave); color: var(--alerta); }

.carta-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
.etiqueta-chip {
  font-size: 10.5px;
  font-weight: 500;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid;
}
.carta-descripcion {
  font-size: 12px;
  color: var(--tinta-suave);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.carta-plata {
  background: var(--papel);
  border-radius: var(--r-chico);
  padding: 7px 9px;
  font-size: 11.5px;
  display: grid;
  gap: 3px;
}
.carta-plata div { display: flex; justify-content: space-between; gap: 8px; }
.carta-plata .valor { font-weight: 500; font-variant-numeric: tabular-nums; }
.carta-plata .linea-saldo {
  border-top: 1px solid var(--borde);
  padding-top: 4px;
  margin-top: 1px;
}
.tenue { color: var(--tinta-suave); }
.pagado { color: var(--verde); }
.pendiente { color: var(--ambar); font-weight: 700; }
.saldado { color: var(--verde); font-weight: 700; }

.carta-contactos { display: flex; gap: 5px; flex-wrap: wrap; }
.contacto {
  font-size: 11px;
  text-decoration: none;
  border: 1px solid var(--borde);
  border-radius: var(--r-chico);
  padding: 3px 8px;
  color: var(--tinta);
  background: var(--blanco);
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.contacto:hover { border-color: var(--oliva-claro); background: var(--oliva-suave); }

.carta-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.insignia {
  font-size: 10.5px;
  border-radius: 999px;
  padding: 2px 9px;
  border: 1px solid;
  font-weight: 500;
}
.est-proposal    { background: #fdf5e4; color: #8a6a12; border-color: #ecdcb4; }
.est-in_progress { background: #e8f2ec; color: #216344; border-color: #c3ded0; }
.est-paused      { background: #eef0f2; color: #5b6472; border-color: #dcdfe4; }
.est-completed   { background: #e8ecf5; color: #2a3f70; border-color: #ccd5e8; }
.est-custom      { background: #f0ebf6; color: #5b3f80; border-color: #ddd2ea; }
.carta-pie-derecha {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--tinta-suave);
}
.contador {
  background: var(--oliva);
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  padding: 0 5px;
  margin-left: 3px;
  font-weight: 700;
}
.vacio {
  font-size: 12px;
  color: var(--tinta-suave);
  text-align: center;
  padding: 14px 6px;
  border: 1px dashed var(--borde);
  border-radius: var(--r-chico);
}

/* ---------------------------------------------------------------- horas */

.navegador-dia { display: flex; align-items: center; gap: 8px; font-size: 13px; }
#dia-actual {
  min-width: 152px;
  text-align: center;
  font-weight: 500;
  text-transform: capitalize;
}
.barra-horas { display: grid; gap: 5px; margin-bottom: 14px; }
.barra-horas-texto {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--tinta-suave);
}
.progreso {
  height: 7px;
  background: var(--oliva-suave);
  border-radius: 999px;
  overflow: hidden;
}
.progreso-relleno {
  height: 100%;
  width: 0;
  background: var(--oliva);
  border-radius: 999px;
  transition: width .2s;
}
.progreso-relleno.excedido { background: var(--alerta); }
.excedido-texto { color: var(--alerta); font-weight: 700; }
.fila-hora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--borde);
  border-radius: var(--r-chico);
  padding: 9px 11px;
  margin-bottom: 8px;
}
.fila-hora input { width: 84px; text-align: center; }
.fila-hora-nombre { font-size: 13px; font-weight: 500; margin: 0; }

/* ---------------------------------------------------------------- modales */

.dlg {
  border: none;
  border-radius: var(--r-grande);
  padding: 0;
  max-width: 470px;
  width: calc(100% - 32px);
  box-shadow: var(--sombra-alta);
  background: var(--blanco);
  color: var(--tinta);
}
.dlg::backdrop { background: rgba(15,27,61,.42); backdrop-filter: blur(2px); }
.dlg-cuerpo { padding: 22px 24px 20px; max-height: 86vh; overflow-y: auto; }
.dlg-cuerpo h3 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--navy);
}
.dlg-pie {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid var(--borde);
}
.grupo {
  border: 1px solid var(--borde);
  border-radius: var(--r-chico);
  padding: 4px 13px 14px;
  margin: 16px 0 0;
}
.grupo legend { font-size: 12px; font-weight: 700; color: var(--tinta); padding: 0 5px; }
.selector-etiquetas { display: flex; flex-wrap: wrap; gap: 6px; }

.lista-etiquetas, .lista-pagos { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 7px; }
.lista-etiquetas li, .lista-pagos li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--borde);
  border-radius: var(--r-chico);
  padding: 8px 11px;
  font-size: 13px;
}
.fila-nueva-etiqueta, .form-pago { display: grid; gap: 9px; margin-top: 16px; }
.fila-nueva-etiqueta { grid-template-columns: 1fr auto auto; align-items: center; }
.form-pago input { margin: 0; }

/* ---------------------------------------------------------------- editor del sitio */

.btn[aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn-chico { padding: 5px 11px; font-size: 12.5px; }

.seccion-caja {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  margin-bottom: 10px;
  box-shadow: var(--sombra);
  overflow: hidden;
}
.seccion-cabeza {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.seccion-cabeza::-webkit-details-marker { display: none; }
.seccion-cabeza::before {
  content: "›";
  display: inline-block;
  font-size: 17px;
  color: var(--tinta-suave);
  transition: transform .15s;
}
details[open] > .seccion-cabeza::before { transform: rotate(90deg); }
.seccion-cabeza:hover { background: var(--oliva-suave); }
.seccion-nombre {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  flex: 1;
  min-width: 0;
}
.seccion-meta { font-size: 12px; color: var(--tinta-suave); white-space: nowrap; }
.marca-editado {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--oro);
  border: 1px solid #e6d7ac;
  background: #fdf8ec;
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
}
.seccion-cuerpo {
  border-top: 1px solid var(--borde);
  padding: 6px 16px 16px;
  background: var(--papel);
}

.campo-bloque {
  padding: 13px 0;
  border-bottom: 1px solid var(--borde);
}
.campo-bloque:last-child { border-bottom: none; }
.campo-cabeza {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.campo-tipo {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--tinta-suave);
  font-weight: 700;
}
.campo-estado { font-size: 11px; color: var(--oro); }
.campo-estado.destello { color: var(--verde); font-weight: 700; }
.campo-bloque textarea {
  font-size: 14px;
  line-height: 1.5;
  background: var(--blanco);
}
.campo-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 7px;
}

/* ---------------------------------------------------------------- avisos */

.avisos {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: grid;
  gap: 8px;
  z-index: 200;
  max-width: calc(100% - 32px);
}
.aviso {
  background: var(--navy);
  color: #fff;
  padding: 10px 15px;
  border-radius: var(--r-chico);
  font-size: 13px;
  box-shadow: var(--sombra-alta);
  animation: entra .18s ease-out;
}
.aviso.malo { background: var(--alerta); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- movil */

@media (max-width: 640px) {
  .principal { padding: 16px 14px 48px; gap: 20px; }
  .contenedor { padding: 0 14px; }
  .kpi-valor { font-size: 20px; }
  .columna { width: 84vw; }
  .carta-fantasma { width: calc(84vw - 24px); }
  .dos-columnas { grid-template-columns: 1fr; }
  #dia-actual { min-width: 112px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}