/* ============================================================
   PORTAL THE RIGHT POSITION · COMPONENTES
   Botones, campos, avisos, tarjetas, chips y rejillas (identidad §7).
   ============================================================ */

/* ---------- botones ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  font-family:var(--trp-display);
  font-weight:500;
  font-size:15px;
  padding:14px 24px;
  border-radius:100px;
  border:1px solid var(--trp-borde-2);
  background:var(--trp-sup);          /* en claro el botón base lleva fondo blanco */
  color:var(--trp-tinta);
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background .22s var(--trp-ease), border-color .22s var(--trp-ease), transform .22s var(--trp-ease);
}
.btn:hover{ background:var(--trp-oro-tinte); border-color:var(--trp-oro-borde); }
.btn:hover .cuadro{ transform:translateY(-1px) rotate(45deg); }
.btn:active{ transform:translateY(1px); }

.btn-oro{
  background:var(--trp-oro);
  border-color:var(--trp-oro);
  color:#141617;
  font-weight:700;
}
.btn-oro .cuadro{ background:#141617; }   /* dentro del botón lima el cuadrito va negro */
.btn-oro:hover{ background:#C9AE4A; border-color:#C9AE4A; }

.btn-chico{ padding:9px 16px; font-size:13.5px; gap:8px; }
.btn-ancho{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:progress; }

/* ---------- campos ---------- */
.campo{ display:flex; flex-direction:column; gap:7px; }
.campo__etiqueta{ font-size:13px; font-weight:500; color:var(--trp-tinta-2); }
.campo__caja{ position:relative; display:flex; }
.campo__control{
  width:100%;
  height:46px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--trp-borde-2);
  background:var(--trp-sup);
  color:var(--trp-tinta);
  transition:border-color .2s var(--trp-ease), box-shadow .2s var(--trp-ease);
}
.campo__control::placeholder{ color:var(--trp-tinta-3); }
.campo__control:hover{ border-color:var(--trp-tinta-3); }
.campo__control:focus,
.campo__control:focus-visible{
  outline:none;
  border-color:var(--trp-oro-tinta);
  box-shadow:0 0 0 3px rgba(140,175,30,.30);
}
.campo__control--clave{ padding-right:52px; }

.campo__ver{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px;
  display:grid; place-items:center;
  border:0; border-radius:9px;
  background:transparent;
  color:var(--trp-tinta-2);
  cursor:pointer;
}
.campo__ver:hover{ background:var(--trp-sup-2); color:var(--trp-tinta); }
.campo__ver .campo__ver-no{ display:none; }
.campo__ver[aria-pressed="true"] .campo__ver-si{ display:none; }
.campo__ver[aria-pressed="true"] .campo__ver-no{ display:block; }

.formulario{ display:flex; flex-direction:column; gap:16px; }

/* ---------- avisos ---------- */
.aviso{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px 15px;
  border-radius:14px;
  border:1px solid transparent;
  font-size:14px;
  line-height:1.45;
}
.aviso__icono{ flex:none; margin-top:1px; }
.aviso__texto{ min-width:0; }
.aviso--error { background:var(--trp-error-tinte);  color:var(--trp-error);  border-color:rgba(179,38,30,.22); }
.aviso--alerta{ background:var(--trp-alerta-tinte); color:var(--trp-alerta); border-color:rgba(161,95,0,.22); }
.aviso--ok    { background:var(--trp-ok-tinte);     color:var(--trp-ok);     border-color:rgba(46,125,79,.22); }
.aviso--info  { background:var(--trp-info-tinte);   color:var(--trp-info);   border-color:rgba(31,111,178,.22); }
/* Aviso de marca: para "esto va en camino", sin meter azul a la paleta */
.aviso--marca { background:var(--trp-oro-tinte); color:var(--trp-oro-tinta); border-color:var(--trp-oro-borde); }
.aviso + .aviso{ margin-top:10px; }

/* ---------- icono en caja ---------- */
.icono{
  width:50px; height:50px;
  display:grid; place-items:center;
  border-radius:14px;
  background:var(--trp-oro-tinte);
  border:1px solid var(--trp-oro-borde);
  color:var(--trp-oro-tinta);
}
.icono-linea, .icono svg{ display:block; }

/* ---------- tarjetas ---------- */
.tarjeta{
  position:relative;
  background:var(--trp-sup);
  border:1px solid var(--trp-borde);
  border-radius:var(--trp-r-g);
  box-shadow:var(--trp-sombra);
}

/* ---------- chips de estado ---------- */
/* El foco: un puntico verde para señalar algo vivo (la cotización activa del cliente). */
.foco{
  display:inline-block;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--trp-ok);
  box-shadow:0 0 0 3px var(--trp-ok-tinte);
  vertical-align:middle;
  margin-right:8px;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px;
  border-radius:100px;
  border:1px solid var(--trp-borde-2);
  background:var(--trp-sup-2);
  color:var(--trp-tinta-2);
  font-family:var(--trp-display);
  font-size:11px;
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.chip--listo{ background:var(--trp-oro); border-color:var(--trp-oro); color:#141617; }
/* "Pendiente" va en gris a propósito: la lima queda como ÚNICA señal.
   El naranja se reserva para avisos de verdad, no para seis tarjetas seguidas. */
.chip--pendiente{ background:var(--trp-sup-2); border-color:var(--trp-borde-2); color:var(--trp-tinta); }

/* ---------- campos: nota de ayuda y selector ---------- */
.campo__nota{ font-size:12.5px; line-height:1.45; color:var(--trp-tinta-2); }
/* ---------- el buscador de clientes ----------
   Sustituye a los <select> largos de cliente: se aprieta, se escribe y sale una lista
   corta. El select de toda la vida se queda escondido como campo del formulario (si el
   JavaScript no corre, se ve el select normal y todo sigue funcionando). */
.buscador{ position:relative; }
.buscador__original{ display:none; }
.buscador__boton{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; height:46px; padding:0 14px;
  border-radius:12px; border:1px solid var(--trp-borde-2); background:var(--trp-sup);
  color:var(--trp-tinta); font:inherit; font-size:15px; text-align:left; cursor:pointer;
  transition:border-color .2s var(--trp-ease);
}
.buscador__boton:hover{ border-color:var(--trp-tinta-3); }
.buscador__boton.es-abierto{ border-color:var(--trp-tinta); }
.buscador__texto{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.buscador__texto--vacio{ color:var(--trp-tinta-3); }
.buscador__flecha{ color:var(--trp-tinta-3); font-size:12px; }
.buscador__panel{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px);
  padding:10px; border-radius:14px; border:1px solid var(--trp-borde);
  background:var(--trp-sup); box-shadow:var(--trp-sombra-alta);
}
.buscador__entrada{ height:40px; }
.buscador__pista{ margin:8px 2px 6px; font-size:12.5px; color:var(--trp-tinta-3); }
.buscador__lista{ list-style:none; margin:0; padding:0; max-height:290px; overflow-y:auto; }
.buscador__fila{
  display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center;
  padding:9px 10px; border-radius:10px; cursor:pointer;
}
.buscador__fila:hover, .buscador__fila:focus{
  background:var(--trp-sup-2); outline:none;
}
.buscador__nombre{ font-size:14.5px; color:var(--trp-tinta); }
.buscador__detalle{
  grid-column:1; font-size:12.5px; color:var(--trp-tinta-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.buscador__estado{
  grid-row:1 / span 2; grid-column:2; align-self:center;
  font-size:11.5px; letter-spacing:.02em; color:var(--trp-tinta-2);
  background:var(--trp-sup-2); border-radius:100px; padding:4px 9px; white-space:nowrap;
}

select.campo__control{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, var(--trp-tinta-2) 50%), linear-gradient(135deg, var(--trp-tinta-2) 50%, transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 14px) 21px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:38px;
}

/* ---------- tablas densas (§11) ---------- */
.tabla-caja{
  background:var(--trp-sup);
  border:1px solid var(--trp-borde);
  border-radius:var(--trp-r);
  box-shadow:var(--trp-sombra);
  overflow:hidden;
}
.tabla{ width:100%; border-collapse:collapse; font-size:14px; }
.tabla th{
  padding:13px 18px;
  background:var(--trp-sup-2);
  border-bottom:1px solid var(--trp-borde);
  font-family:var(--trp-display);
  font-size:11px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--trp-tinta-2);
  text-align:left;
  white-space:nowrap;
}
.tabla td{
  padding:11px 18px;
  height:44px;
  border-bottom:1px solid var(--trp-borde);
  color:var(--trp-tinta);
  vertical-align:middle;
}
.tabla tbody tr:nth-child(even){ background:var(--trp-sup-2); }
.tabla tbody tr:last-child td{ border-bottom:0; }
.tabla__num{ font-variant-numeric:tabular-nums; color:var(--trp-tinta-2); white-space:nowrap; }
.tabla__yo{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--trp-tinta-3); }
.tabla__acciones{ text-align:right; white-space:nowrap; }
.tabla__acciones form{ display:inline; }
.chip--inactivo{ background:var(--trp-sup-3); border-color:var(--trp-borde-2); color:var(--trp-tinta-2); }
.chip--alerta{ background:var(--trp-error-tinte); border-color:rgba(179,38,30,.28); color:var(--trp-error); }
.chip--info{ background:var(--trp-info-tinte); border-color:rgba(31,111,178,.22); color:var(--trp-info); }

/* ---------- renglones de los precios del sitio ---------- */
/* Cada precio es un renglón de lado a lado: el nombre se queda con el espacio que sobra y
   las casillas (una por paquete de horas) van a la derecha, siempre del mismo tamaño. Antes
   iban en dos columnas y, con tres casillas, todo quedaba apretado y con hueco a la derecha. */
.precios-lista{ display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.precios-fila{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 16px; background:var(--trp-sup);
  border:1px solid var(--trp-borde); border-radius:var(--trp-r);
}
.precios-fila--ejemplo{ border-color:var(--trp-alerta-tinte); background:#FFFDF7; }
.precios-fila__nombre{ flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:3px; }
.precios-fila__titulo{ font-weight:500; }
.precios-fila__valores{ display:flex; gap:12px; flex-wrap:wrap; }
.precios-fila__caja{ display:flex; flex-direction:column; gap:4px; }
.precios-fila__rotulo{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--trp-tinta-3); }
.precios-fila__caja .campo__control--fila{ width:120px; max-width:120px; }
.precios-fila__acciones{ display:flex; align-items:center; gap:6px; }

/* ---------- botones de icono: nomás el dibujo, la explicación en el globito ---------- */
/* En una tabla de renglones el texto "Subir / Bajar / Eliminar" no cabe (y empuja la
   descripción hasta hacerla ilegible). El botón lleva el icono, y el nombre va en el
   title (el globito del navegador) y en aria-label (para quien usa lector de pantalla).
   Todos miden lo mismo: así la columna queda pareja de renglón en renglón. */
.btn-icono{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  padding:0;
  border-radius:100px;
  border:1px solid var(--trp-borde-2);
  background:var(--trp-sup);
  color:var(--trp-tinta-2);
  cursor:pointer;
  transition:background .2s var(--trp-ease), border-color .2s var(--trp-ease), color .2s var(--trp-ease);
}
.btn-icono:hover{ background:var(--trp-oro-tinte); border-color:var(--trp-oro-borde); color:var(--trp-tinta); }
.btn-icono:active{ transform:translateY(1px); }
.btn-icono:disabled{ opacity:.3; cursor:not-allowed; }
.btn-icono:disabled:hover{ background:var(--trp-sup); border-color:var(--trp-borde-2); color:var(--trp-tinta-2); }
.btn-icono--peligro:hover{ background:var(--trp-error-tinte); border-color:rgba(179,38,30,.35); color:var(--trp-error); }
/* El mismo botón, pero apagado: dice "aquí no se puede" y el globito explica por qué.
   Se usa en los precios que la cuenta del cotizador necesita (no se pueden borrar). */
.btn-icono--apagado{ opacity:.35; cursor:not-allowed; border-style:dashed; }
.btn-icono--apagado:hover{ background:var(--trp-sup); border-color:var(--trp-borde-2); color:var(--trp-tinta-2); }

/* Los botones de mover y borrar van SIEMPRE apilados y en el mismo orden (los que no
   aplican salen apagados, no escondidos): si aparecieran y desaparecieran, cada renglón
   los tendría en un lugar distinto y la columna se vería desplazada. */
.tabla__acciones--columna{ width:1%; text-align:center; vertical-align:middle; }
.tabla__acciones--columna .btn-icono{ display:flex; margin:0 auto; }
.tabla__acciones--columna .btn-icono + .btn-icono{ margin-top:6px; }

/* ---------- anchos de columna para las tablas de trabajo ----------
   En las tablas que se llenan a mano (los renglones del cotizador y los pendientes) la
   primera columna es la que importa: se queda con todo lo que sobra, y las demás miden lo
   que necesitan. Sin esto, el navegador reparte el ancho a partes iguales y el texto que
   de verdad hay que leer sale apretado. */
.tabla .tabla__col-corto{ width:112px; }
.tabla .tabla__col-medio{ width:172px; }
.tabla .tabla__col-mover{ width:58px; }
.tabla th.tabla__col-corto,
.tabla th.tabla__col-medio{ white-space:normal; }

/* ---------- la tabla de renglones del cotizador ---------- */
/* Son seis columnas con campos adentro: con el relleno de las tablas normales no queda
   espacio para la descripción, así que aquí el relleno es más corto. */
.tabla--renglones th,
.tabla--renglones td{ padding:12px 12px; }
.tabla--renglones .campo__control--fila{ max-width:100%; font-size:14px; }

/* Los botones de icono de una tabla pueden ir en fila (cuando son dos y el renglón es
   corto) o en columna (cuando son tres y hay que verlos siempre en el mismo lugar). */
.tabla__acciones:not(.tabla__acciones--columna) .btn-icono + .btn-icono{ margin-left:6px; }

/* ---------- campos con error ---------- */
.campo--mal .campo__control{ border-color:var(--trp-error); }
.campo--mal .campo__control:focus,
.campo--mal .campo__control:focus-visible{ border-color:var(--trp-error); box-shadow:0 0 0 3px rgba(179,38,30,.16); }
.campo__error{ font-size:12.5px; line-height:1.4; color:var(--trp-error); }
.campo--ancho{ grid-column:1 / -1; }
.campo__control--area{
  height:auto;
  min-height:112px;
  padding:12px 14px;
  line-height:1.55;
  resize:vertical;
  font-family:var(--trp-texto);
}

/* ---------- tablas: ligas y datos secundarios ---------- */
.tabla__nombre{ font-weight:500; color:var(--trp-tinta); text-decoration:none; }
.tabla__nombre:hover{ color:var(--trp-oro-tinta); text-decoration:underline; }
.tabla__aparte{ display:block; margin-top:3px; font-size:12.5px; color:var(--trp-tinta-2); }
.ficha__valor--vacio{ color:var(--trp-tinta-3); }

/* ---------- formularios en línea (botones dentro de una tabla) ---------- */
.formulario-en-linea{ display:inline; }

/* ---------- casillas de verificación ---------- */
.casilla{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13.5px;
  color:var(--trp-tinta-2);
  line-height:1.45;
}
.casilla input[type="checkbox"]{
  width:17px;
  height:17px;
  flex:none;
  accent-color:var(--trp-oro-tinta);
}

/* ---------- campos dentro de una tabla ---------- */
.formulario-fila{ display:flex; align-items:center; gap:10px; }
.campo__control--fila{
  height:38px;
  max-width:200px;
  padding:0 11px;
  font-size:13.5px;
}
.campo-fila{ display:flex; align-items:center; gap:9px; }
.campo-fila__unidad{ font-size:12.5px; color:var(--trp-tinta-2); white-space:nowrap; }

/* ---------- rejillas ---------- */
.rejilla{ display:grid; gap:22px; }
.rejilla--3{ grid-template-columns:repeat(3,1fr); }
.rejilla--2{ grid-template-columns:repeat(2,1fr); }
.rejilla--4{ grid-template-columns:repeat(4,1fr); }

@media (max-width:1040px){
  .rejilla--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .rejilla--3{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .rejilla--3, .rejilla--4{ grid-template-columns:1fr; }
}

/* ---------- la revisión de la contraseña, mientras se escribe ---------- */
.clave-revision{ display:grid; gap:11px; margin:2px 0 6px; }
.clave-fuerza{ display:flex; align-items:center; gap:11px; }
.clave-fuerza__barra{
  flex:1 1 auto;
  height:6px;
  border-radius:99px;
  background:var(--trp-sup-3);
  overflow:hidden;
}
.clave-fuerza__relleno{
  display:block;
  height:100%;
  width:0;
  border-radius:99px;
  background:var(--trp-tinta-3);
  transition:width .2s var(--trp-ease), background .2s var(--trp-ease);
}
.clave-fuerza__texto{ min-width:98px; font-size:12.5px; color:var(--trp-tinta-2); text-align:right; }
.clave-fuerza--1 .clave-fuerza__relleno{ width:25%;  background:var(--trp-error); }
.clave-fuerza--2 .clave-fuerza__relleno{ width:50%;  background:var(--trp-alerta); }
.clave-fuerza--3 .clave-fuerza__relleno{ width:75%;  background:var(--trp-info); }
.clave-fuerza--4 .clave-fuerza__relleno{ width:100%; background:var(--trp-ok); }
.clave-fuerza--1 .clave-fuerza__texto{ color:var(--trp-error); }
.clave-fuerza--2 .clave-fuerza__texto{ color:var(--trp-alerta); }
.clave-fuerza--3 .clave-fuerza__texto{ color:var(--trp-info); }
.clave-fuerza--4 .clave-fuerza__texto{ color:var(--trp-ok); }
.clave-lista{ display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.clave-lista__punto{
  display:flex;
  align-items:flex-start;
  gap:9px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--trp-tinta-2);
}
.clave-lista__marca{
  position:relative;
  flex:0 0 15px;
  width:15px;
  height:15px;
  margin-top:1px;
  border:1.5px solid var(--trp-borde-2);
  border-radius:50%;
  background:var(--trp-sup);
  transition:background .15s var(--trp-ease), border-color .15s var(--trp-ease);
}
.clave-lista__punto.clave-cumple{ color:var(--trp-tinta); }
.clave-lista__punto.clave-cumple .clave-lista__marca{ background:var(--trp-oro); border-color:var(--trp-oro); }
.clave-lista__punto.clave-cumple .clave-lista__marca::after{
  content:"";
  position:absolute;
  left:4.4px;
  top:1.4px;
  width:3.6px;
  height:7.4px;
  border:solid var(--trp-tinta);
  border-width:0 1.7px 1.7px 0;
  transform:rotate(42deg);
}
.clave-lista__punto--opcional{ opacity:.75; }
.campo__nota--bien{ color:var(--trp-ok); }
.campo__nota--mal{ color:var(--trp-error); }

/* ---------- la pantalla del correo del portal ---------- */
.bitacora-correo{
  max-height:300px;
  margin:0;
  padding:14px 16px;
  overflow:auto;
  border:1px solid var(--trp-borde);
  border-radius:10px;
  background:var(--trp-sup-2);
  font-family:'Space Grotesk',ui-monospace,'Courier New',monospace;
  font-size:12px;
  line-height:1.7;
  color:var(--trp-tinta-2);
  white-space:pre-wrap;
  word-break:break-word;
}
.pliegue{ border:1px solid var(--trp-borde); border-radius:10px; background:var(--trp-sup); }
.pliegue__titulo{
  padding:11px 15px;
  font-size:13px;
  font-weight:600;
  color:var(--trp-tinta-2);
  cursor:pointer;
  list-style:none;
}
.pliegue__titulo::-webkit-details-marker{ display:none; }
.pliegue__titulo::before{ content:"+ "; color:var(--trp-tinta-3); }
.pliegue[open] .pliegue__titulo::before{ content:"– "; }
.pliegue__cuerpo{ padding:0 15px 15px; }

/* ---------- el visor de PDF, encima del portal ----------
   Abre el documento sin sacar a nadie del portal: si se cierra, se sigue donde estaba. */
.visor{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:22px; background:rgba(10,10,12,.55);
}
.visor__caja{
  display:flex; flex-direction:column;
  width:min(100%, 1000px); height:min(100%, 900px);
  background:var(--trp-sup); border-radius:var(--trp-r); overflow:hidden;
  box-shadow:var(--trp-sombra-alta);
}
.visor__barra{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; border-bottom:1px solid var(--trp-borde); background:var(--trp-sup-2);
}
.visor__titulo{ font-weight:600; }
.visor__acciones{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.visor__aviso{ font-size:13px; color:var(--trp-tinta-2); }
.visor__aviso--ok{ color:var(--trp-ok); }
.visor__aviso--error{ color:var(--trp-error); }
.visor__marco{ flex:1; width:100%; border:0; background:var(--trp-sup-3); }
body.sin-scroll{ overflow:hidden; }

@media (max-width:760px){
  .visor{ padding:0; }
  .visor__caja{ height:100%; border-radius:0; }
}