/* ==========================================================================
   estilo.css — Hoja de estilo del CRM de llamadas
   Un solo archivo, organizado por secciones.
   ========================================================================== */

:root {
  --navy: #0b1f38;
  --navy-suave: #16334f;
  --azul: #076ee5;
  --azul-claro: #eaf2fd;
  --verde: #0f9d58;
  --verde-claro: #e8f6ee;
  --ambar: #b7791f;
  --ambar-claro: #fdf5e4;
  --rojo: #c5221f;
  --rojo-claro: #fdecea;
  --gris: #64748b;
  --gris-claro: #f4f6f8;
  --borde: #dde3ea;
  --texto: #16232f;
  --blanco: #ffffff;
  --sombra: 0 1px 2px rgba(11, 31, 56, .06), 0 2px 8px rgba(11, 31, 56, .05);
  --radio: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--gris-claro);
}

a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; color: var(--navy); }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
code { background: var(--gris-claro); padding: 1px 5px; border-radius: 4px; font-size: .92em; }

/* ---------------------------------------------------------------- barra -- */
.barra {
  display: flex; align-items: center; gap: 22px;
  background: var(--navy); color: #fff;
  padding: 0 20px; height: 54px;
  position: sticky; top: 0; z-index: 20;
}
.marca { display: flex; align-items: baseline; gap: 7px; color: #fff; }
.marca:hover { text-decoration: none; }
.marca-ori { font-size: 21px; font-weight: 800; letter-spacing: .5px; }
.marca-sub { font-size: 13px; color: #8db8e8; text-transform: uppercase; letter-spacing: 1.4px; }

.menu { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.menu a {
  color: #c8d8ea; padding: 7px 12px; border-radius: 7px;
  font-size: 14px; white-space: nowrap;
}
.menu a:hover { background: var(--navy-suave); color: #fff; text-decoration: none; }
.menu a.aqui { background: var(--azul); color: #fff; font-weight: 600; }
.menu a b {
  background: rgba(255,255,255,.22); border-radius: 10px;
  padding: 1px 7px; font-size: 12px; margin-left: 3px;
}
.menu a.aqui b { background: rgba(255,255,255,.3); }

.quien { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.quien .nombre { color: #fff; font-weight: 600; }
.quien a { color: #9dbcdc; }
.quien a:hover { color: #fff; }
.quien .salir { color: #f0a8a6; }

/* --------------------------------------------------------------- layout -- */
main { padding: 22px 20px 60px; }
main.ancho { max-width: 1180px; margin: 0 auto; }
main.muy-ancho { max-width: 100%; }
main.estrecho { max-width: 520px; margin: 0 auto; }

.tarjeta {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 18px 20px; box-shadow: var(--sombra);
  margin-bottom: 18px;
}
.cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 16px; flex-wrap: wrap;
}
.cabecera h1 { margin: 0; }

/* --------------------------------------------------------------- avisos -- */
.avisos { margin-bottom: 16px; }
.aviso {
  padding: 11px 15px; border-radius: 8px; margin-bottom: 8px;
  border-left: 4px solid var(--azul); background: var(--azul-claro);
  font-size: 14px;
}
.aviso.ok { border-color: var(--verde); background: var(--verde-claro); }
.aviso.error { border-color: var(--rojo); background: var(--rojo-claro); }
.aviso.aviso { border-color: var(--ambar); background: var(--ambar-claro); }
.aviso.atencion {
  border-color: var(--ambar); background: var(--ambar-claro);
  font-size: 14px;
}

/* -------------------------------------------------------------- botones -- */
.boton {
  display: inline-block; border: 1px solid var(--borde); background: var(--blanco);
  color: var(--texto); padding: 9px 16px; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-family: inherit; font-weight: 600;
}
.boton:hover { background: var(--gris-claro); text-decoration: none; }
.boton.principal { background: var(--azul); border-color: var(--azul); color: #fff; }
.boton.principal:hover { background: #0560c9; }
.boton.peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.boton.peligro:hover { background: #a51b19; }
.boton.suave { background: var(--gris-claro); }
.boton.grande { padding: 14px 22px; font-size: 16px; }
.boton:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- tablas -- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 11px; border-bottom: 1px solid var(--borde); }
th {
  background: var(--gris-claro); font-size: 12px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--gris); font-weight: 700;
}
tbody tr:hover { background: #fafbfc; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-scroll { overflow-x: auto; }

/* ----------------------------------------------------------- etiquetas -- */
.eti {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.eti.verde { background: var(--verde-claro); color: #0a6b3c; }
.eti.azul { background: var(--azul-claro); color: #05509f; }
.eti.ambar { background: var(--ambar-claro); color: #8a5a12; }
.eti.rojo { background: var(--rojo-claro); color: #9c1a17; }
.eti.gris { background: #eef1f4; color: #4a5a68; }

/* ------------------------------------------------------------ cuadros -- */
.fila-cuadros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.cuadro {
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 15px 17px; box-shadow: var(--sombra);
}
.cuadro .valor {
  font-size: 30px; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.cuadro .titulo {
  font-size: 12px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--gris); font-weight: 700; margin-bottom: 4px;
}
.cuadro .pie { font-size: 12.5px; color: var(--gris); margin-top: 4px; }
.cuadro.destaca { border-color: var(--azul); }
.cuadro.destaca .valor { color: var(--azul); }

/* ==================================================== PANTALLA DE LLAMADA */
.llamada { display: grid; grid-template-columns: 1fr 340px; gap: 18px; align-items: start; }
@media (max-width: 1050px) { .llamada { grid-template-columns: 1fr; } }

.encabezado-llamada {
  background: var(--navy); color: #fff; border-radius: var(--radio);
  padding: 20px 24px; margin-bottom: 16px;
}
.encabezado-llamada .quien-llama {
  font-size: 13px; color: #9dbcdc; text-transform: uppercase;
  letter-spacing: 1.2px; margin-bottom: 6px;
}
.encabezado-llamada .cliente {
  font-size: 34px; font-weight: 800; line-height: 1.1; margin-bottom: 10px;
  word-break: break-word;
}
.encabezado-llamada .datos { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; }
.encabezado-llamada .datos div { color: #c8d8ea; }
.encabezado-llamada .datos b { color: #fff; }
.telefono-grande {
  font-size: 25px; font-weight: 700; color: #fff; letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}
/* Boton de marcar por la central (3CX). Va dentro del encabezado navy, asi
   que tiene que saltar a la vista tanto como el propio telefono. */
.boton-llamar {
  display: inline-block; margin-top: 10px;
  background: var(--verde); color: #fff; font-weight: 700; font-size: 15px;
  padding: 11px 20px; border-radius: 8px; text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.boton-llamar:hover { background: #0c8347; color: #fff; text-decoration: none; }
.yo-soy {
  background: rgba(255,255,255,.1); border-radius: 8px; padding: 9px 14px;
  font-size: 14.5px; margin-top: 14px; color: #dce9f7;
  border-left: 3px solid #58a6f0;
}
.yo-soy b { color: #fff; }

.guion { font-size: 16.5px; line-height: 1.65; }
.guion .bloque { margin-bottom: 20px; }
.guion .bloque h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--azul); margin-bottom: 7px;
}
.guion p { margin: 0 0 11px; }
.guion .espera {
  background: var(--ambar-claro); border-left: 3px solid var(--ambar);
  padding: 9px 13px; border-radius: 6px; font-weight: 600; color: #7a4e0d;
  font-size: 14.5px;
}
.objecion { border-top: 1px solid var(--borde); padding: 12px 0; }
.objecion:first-child { border-top: 0; }
.objecion .pregunta { font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.objecion .respuesta { color: #3d4d5c; }

/* ----------------------------------------------------- panel de resultado */
.panel-costado { position: sticky; top: 72px; }
.resultados { display: grid; gap: 8px; }
.resultados button {
  width: 100%; text-align: left; padding: 13px 15px; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--blanco); cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--texto);
  display: flex; align-items: center; gap: 10px;
}
.resultados button:hover { border-color: var(--azul); background: var(--azul-claro); }
.resultados button .teja {
  width: 24px; height: 24px; border-radius: 6px; display: grid;
  place-items: center; font-size: 12px; background: var(--gris-claro);
  color: var(--gris); flex: 0 0 auto;
}
.resultados button.elegido { border-color: var(--azul); background: var(--azul-claro); }
.resultados button.r-verde .teja { background: var(--verde); color: #fff; }
.resultados button.r-rojo .teja { background: var(--rojo); color: #fff; }
.resultados button.r-azul .teja { background: var(--azul); color: #fff; }
.resultados button.r-ambar .teja { background: var(--ambar); color: #fff; }
.resultados button.dnc { border-color: var(--rojo); color: var(--rojo); }
.resultados button.dnc:hover { background: var(--rojo-claro); }

.campo { margin-bottom: 13px; }
.campo label {
  display: block; font-size: 12.5px; font-weight: 700; color: var(--gris);
  text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px;
}
.campo input[type=text], .campo input[type=search], .campo input[type=date],
.campo input[type=password], .campo select, .campo textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borde);
  border-radius: 8px; font-family: inherit; font-size: 14.5px;
  background: var(--blanco); color: var(--texto);
}
.campo textarea { resize: vertical; min-height: 76px; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--azul); outline-offset: -1px; border-color: var(--azul);
}
.campo .ayuda { font-size: 12.5px; color: var(--gris); margin-top: 4px; }

.reloj {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--navy);
  font-size: 15px;
}

/* -------------------------------------------------------------- enlaces -- */
.enlaces-rapidos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.flechas { display: flex; gap: 8px; justify-content: space-between; margin-top: 14px; }
.vacio { text-align: center; padding: 50px 20px; color: var(--gris); }
.vacio h1 { color: var(--verde); }

/* --------------------------------------------------------------- entrar -- */
.entrar { min-height: 100vh; display: grid; place-items: center; background: var(--navy); }
.entrar .caja {
  background: var(--blanco); padding: 34px 32px; border-radius: 14px;
  width: 100%; max-width: 390px; box-shadow: 0 10px 40px rgba(0,0,0,.3);
}
.entrar h1 { font-size: 23px; margin-bottom: 4px; }
.entrar .sub { color: var(--gris); font-size: 14px; margin-bottom: 22px; }
.entrar .boton { width: 100%; padding: 12px; font-size: 15px; }

/* ------------------------------------------------------------- detalles -- */
.rejilla-datos { display: grid; grid-template-columns: 150px 1fr; gap: 7px 16px; font-size: 14.5px; }
.rejilla-datos dt { color: var(--gris); font-weight: 600; }
.rejilla-datos dd { margin: 0; }
.historial li { margin-bottom: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--borde); }
.historial li:last-child { border-bottom: 0; }
.historial .cuando { font-size: 12.5px; color: var(--gris); }
.mini { font-size: 13px; color: var(--gris); }
.derecha { text-align: right; }
.centro { text-align: center; }
.ahora { color: var(--rojo); font-weight: 700; }
@media print { .barra, .panel-costado, .boton { display: none !important; } }