/* CRM V10 · sistema de la casa MarketinAI (tinta, verde respondido, Bricolage + Archivo) */
@font-face { font-family: "Bricolage"; src: url(/estatico/fuentes/bricolage-grotesque.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(/estatico/fuentes/archivo.woff2) format("woff2"); font-weight: 400 800; font-display: swap; }
:root {
  --tinta: #0B1630; --tinta-2: #16244A; --texto-2: #475467; --linea: #E3E8EF; --linea-2: #D5DCE6;
  --niebla: #F4F6F9; --papel: #FFFFFF; --verde: #12B76A; --verde-osc: #067647; --verde-suave: #E7F8EF;
  --rojo: #F04438; --rojo-texto: #B42318; --rojo-suave: #FEECEB; --azul-osc: #1D3FC4; --azul-suave: #EAF0FF;
  --ambar-osc: #B54708; --ambar-suave: #FEF0DC;
  --display: "Bricolage", "Archivo", system-ui, sans-serif;
  --texto: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--niebla); color: var(--tinta); font: 400 16px/1.5 var(--texto); }
a { color: var(--azul-osc); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--azul-osc); outline-offset: 2px; }
h1, h2 { font-family: var(--display); letter-spacing: -0.01em; line-height: 1.15; }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 .5rem; }
h2 { font-size: 1rem; margin: 0 0 .75rem; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--papel); padding: .5rem 1rem; z-index: 10; }
.saltar:focus { left: 8px; top: 8px; }

.barra { background: var(--tinta); color: #fff; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center;
  justify-content: space-between; padding: .75rem 16px; }
.marca { color: #fff; text-decoration: none; display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.marca-v { font: 800 1.15rem/1 var(--display); color: var(--verde); letter-spacing: -0.02em; }
.marca-v.grande { font-size: 1.5rem; margin: 0 0 .25rem; color: var(--verde-osc); }
.marca-c { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.barra-nav a, .enlace { color: #fff; font: 600 .95rem var(--texto); text-decoration: none; background: none; border: 0;
  padding: .35rem 0; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.barra-nav a:hover, .enlace:hover { text-decoration: underline; }
.barra-nav form { margin: 0; }

.contenido { max-width: 1400px; margin: 0 auto; padding: 1.25rem 16px 3rem; }
.pie { text-align: center; color: var(--texto-2); font-size: .85rem; padding: 0 16px 2rem; }

.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.cifra { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; padding: .9rem 1rem; display: flex; flex-direction: column; }
.cifra-n { font: 800 1.9rem/1 var(--display); }
.cifra-t { color: var(--texto-2); font-size: .9rem; margin-top: .3rem; }
.cifra-rojo { border-color: #F9C5C0; background: var(--rojo-suave); }
.cifra-rojo .cifra-n { color: var(--rojo-texto); }
.cifra-verde .cifra-n { color: var(--verde-osc); }

.buscar { display: flex; gap: .5rem; margin-bottom: 1rem; }
.buscar input { flex: 1; min-width: 0; }

.tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(78%, 1fr); gap: .75rem; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: .5rem; }
.columna { scroll-snap-align: start; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px;
  padding: .9rem; min-width: 0; border-top: 4px solid var(--linea-2); }
.columna-nuevo { border-top-color: var(--rojo); }
.columna-contactado, .columna-propuesta, .columna-negociacion { border-top-color: var(--azul-osc); }
.columna-ganado { border-top-color: var(--verde); }
.columna h2 { display: flex; justify-content: space-between; align-items: center; }
.cuenta { background: var(--niebla); border-radius: 999px; padding: .1rem .55rem; font: 700 .85rem var(--texto); }
.columna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tarjeta a { display: grid; gap: .15rem; padding: .7rem .8rem; border: 1px solid var(--linea); border-radius: 10px;
  text-decoration: none; color: var(--tinta); background: var(--papel); min-height: 44px; }
.tarjeta a:hover { border-color: var(--tinta-2); }
.tarjeta-nombre { font-weight: 700; overflow-wrap: anywhere; }
.tarjeta-detalle { color: var(--texto-2); font-size: .88rem; overflow-wrap: anywhere; }
.vacio { color: var(--texto-2); font-size: .9rem; padding: .4rem 0; }
.mas { color: var(--texto-2); font-size: .85rem; margin: .5rem 0 0; }
.sello { justify-self: start; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: .05rem .5rem; margin-top: .2rem; }
.sello-rojo { background: var(--rojo-suave); color: var(--rojo-texto); }

.migas { margin: 0 0 1rem; }
.migas a { font-weight: 600; text-decoration: none; }
.ficha { background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; padding: 1.25rem; max-width: 760px; }
.ficha section { border-top: 1px solid var(--linea); padding-top: 1rem; margin-top: 1rem; }
.ficha-cabeza h1 { overflow-wrap: anywhere; }
.etapa { display: inline-block; margin: 0; font-weight: 700; border-radius: 999px; padding: .15rem .7rem; background: var(--azul-suave); color: var(--azul-osc); }
.etapa-nuevo { background: var(--rojo-suave); color: var(--rojo-texto); }
.etapa-ganado { background: var(--verde-suave); color: var(--verde-osc); }
.etapa-perdido { background: var(--niebla); color: var(--texto-2); }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: 1rem 0 0; }
.datos dt { color: var(--texto-2); }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.botones form { margin: 0; }

.ficha-form { display: grid; gap: .35rem; }
.ficha-form label { font-weight: 600; margin-top: .4rem; }
input, select, textarea { font: inherit; color: var(--tinta); background: var(--papel); border: 1px solid var(--linea-2);
  border-radius: 10px; padding: .65rem .75rem; min-height: 44px; width: 100%; }
textarea { resize: vertical; }
.boton { font: 700 .95rem var(--texto); border: 1px solid var(--tinta); background: var(--tinta); color: #fff;
  border-radius: 10px; padding: .65rem 1rem; min-height: 44px; cursor: pointer; }
.ficha-form .boton { margin-top: .6rem; justify-self: start; }
.boton:hover { background: var(--tinta-2); }
.boton-claro { background: var(--papel); color: var(--tinta); border-color: var(--linea-2); }
.boton-claro:hover { background: var(--niebla); }
.boton-verde { background: var(--verde-osc); border-color: var(--verde-osc); }
.boton-verde:hover { background: #05603A; }
.boton-rojo { background: var(--papel); color: var(--rojo-texto); border-color: #F9C5C0; }
.boton-rojo:hover { background: var(--rojo-suave); }

.historial { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.act { border-left: 3px solid var(--linea-2); padding: .1rem 0 .1rem .8rem; }
.act-entrada { border-left-color: var(--rojo); }
.act-llamada, .act-whatsapp, .act-correo, .act-reunion, .act-seguimiento { border-left-color: var(--verde); }
.act-cabeza { margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .7rem; font-size: .88rem; color: var(--texto-2); }
.act-tipo { font-weight: 700; color: var(--tinta); }
.act-texto { margin: .2rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.peligro { margin-top: 1.5rem; border-top: 1px solid var(--linea); padding-top: 1rem; }
.peligro summary { cursor: pointer; color: var(--rojo-texto); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.peligro form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.peligro label { display: flex; gap: .5rem; align-items: center; }
.peligro input[type=checkbox] { width: 22px; min-height: 22px; }

.aviso { background: var(--verde-suave); color: var(--verde-osc); border-radius: 10px; padding: .7rem 1rem; font-weight: 600; max-width: 760px; }
.aviso-mal { background: var(--rojo-suave); color: var(--rojo-texto); }
.entrar { max-width: 420px; margin: 8vh auto 0; background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; padding: 1.5rem; }

@media (min-width: 720px) {
  .cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tablero { grid-auto-columns: minmax(260px, 1fr); }
}
@media (min-width: 1280px) {
  .tablero { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }