/*!
 * Portal público del tenant — C01 Nueva solicitud, C02 Consulta de estado.
 * Fuente: design_handoff_bitto/Bitto Portal Publico.dc.html
 *
 * Convive con la paleta cálida "no-Bitto" del shell (views/layouts/portal.php
 * + web/css/views/shells.css): #3A2A24 texto, #6B5A50 texto secundario,
 * #9A8B80 texto sutil, #EDE7DF bordes, #F2ECE5 divisores internos — tal como
 * en el mockup, en vez de los grises neutros del panel interno. El color de
 * marca (acento del tenant, #7A3E2E en el mockup de ejemplo) usa
 * var(--bt-primary) porque Tenant aún no guarda un color configurable
 * (ver decisión en task-2-report.md).
 */

.bt-portal-content {
  display: flex;
  justify-content: center;
  padding: 48px 64px 64px;
}

.bt-portal-col {
  width: 640px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bt-portal-crumb {
  font-size: 13px;
  color: #6B5A50;
}
.bt-portal-crumb a { color: #6B5A50; }

.bt-portal-heading {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #3A2A24;
}

.bt-portal-sub {
  margin: 0;
  font-size: 14px;
  color: #6B5A50;
}

.bt-portal-card {
  background: #FFFFFF;
  border: 1px solid #EDE7DF;
  border-radius: 14px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 1px 3px rgba(58, 42, 36, 0.05);
}

/* Inputs/labels dentro del portal: bordes y foco cálidos, no los grises
   neutros del resto del sitio (identidad "no-Bitto" del portal). */
.bt-portal-card .bt-label { color: #3A2A24; }
.bt-portal-card .bt-input,
.bt-portal-card .bt-textarea {
  border-color: #EDE7DF;
}
.bt-portal-card .bt-input:focus,
.bt-portal-card .bt-textarea:focus {
  border-color: var(--bt-primary);
  outline-color: var(--bt-primary-tint);
}
.bt-portal-card .bt-field-hint { color: #9A8B80; }

.bt-portal-fields-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* C01 — selector de tipo de solicitud (pills). El mockup usa 4 tipos fijos;
   aquí son las categorías reales del tenant (0..N), así que el grid se
   adapta al número real de opciones en vez de asumir 4 columnas fijas. */
.bt-portal-types {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.bt-portal-type {
  position: relative;
  display: block;
  cursor: pointer;
}
.bt-portal-type input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.bt-portal-type__box {
  /* flex + height:100%: todas las pills de una misma fila miden lo mismo
     aunque un nombre largo salte a dos líneas (antes la pill con texto
     envuelto quedaba más alta y descuadraba la fila) */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 10px 8px;
  border: 1px solid #EDE7DF;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #6B5A50;
  transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
/* Bloque de subcategorías (aparece al elegir su categoría padre) */
.bt-portal-subtypes {
  margin: 10px 0 4px;
  padding: 12px;
  border: 1px dashed #EDE7DF;
  border-radius: 9px;
  background: #FBFAF8;
}
.bt-portal-subtypes[hidden] { display: none; }
.bt-portal-subtypes .bt-label { display: block; margin-bottom: 8px; }
.bt-portal-subtypes__optional { font-weight: 400; color: #9A8C82; }
.bt-portal-type input:checked ~ .bt-portal-type__box {
  border-color: var(--bt-primary);
  background: var(--bt-primary-tint);
  color: var(--bt-primary);
}
.bt-portal-type input:focus-visible ~ .bt-portal-type__box {
  outline: 2px solid var(--bt-primary-tint);
}

.bt-portal-consent {
  margin: 0;
  font-size: 12.5px;
  color: #6B5A50;
  line-height: 1.5;
}
.bt-portal-consent a { color: var(--bt-primary); font-weight: 600; }

/* CTA principal del portal (envío de solicitud / acciones de confirmación):
   más grande que .bt-btn genérico del panel interno, valores tomados del
   mockup (design_handoff_bitto/Bitto Portal Publico.dc.html línea 99,
   botón "Enviar solicitud": font-size 15px, padding 13px, border-radius
   9px, ancho completo por ser hijo de un flex column sin align-items). */
.bt-portal__btn {
  width: 100%;
  font-size: 15px;
  padding: 13px;
  border-radius: 9px;
}

/* C01/C02 — pantalla de confirmación tras enviar (sin mockup dedicado:
   reutiliza los mismos tokens/componentes del portal). */
.bt-portal-confirm {
  align-items: center;
  text-align: center;
}
.bt-portal-confirm__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--bt-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bt-success);
  background: var(--bt-success-tint);
}
.bt-portal-confirm__code {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  color: var(--bt-primary);
  background: var(--bt-primary-tint);
  border-radius: var(--bt-radius-md);
  padding: 8px 18px;
}
.bt-portal-confirm__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
}

/* C02 — encabezado del caso */
.bt-portal-ticket-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.bt-portal-ticket-code {
  color: #9A8B80;
  font-size: 12px;
}
.bt-portal-ticket-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #3A2A24;
  letter-spacing: -0.01em;
}
.bt-portal-ticket-meta {
  font-size: 13px;
  color: #6B5A50;
}

/* C02 — línea de tiempo del estado */
.bt-portal-timeline {
  display: flex;
  flex-direction: column;
}
.bt-portal-timeline__item {
  display: flex;
  gap: 14px;
}
.bt-portal-timeline__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 16px;
  flex-shrink: 0;
}
.bt-portal-timeline__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--bt-radius-pill);
  flex-shrink: 0;
  margin-top: 3px;
  box-sizing: border-box;
}
.bt-portal-timeline__dot--done,
.bt-portal-timeline__dot--current { background: var(--bt-primary); border: none; }
.bt-portal-timeline__dot--pending { background: #FFFFFF; border: 2px solid #D8CFC5; }
.bt-portal-timeline__line {
  width: 2px;
  flex: 1;
  background: #F2ECE5;
  min-height: 26px;
}
.bt-portal-timeline__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 18px;
  flex: 1;
}
.bt-portal-timeline__title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bt-portal-timeline__title {
  font-size: 13.5px;
  font-weight: 700;
}
.bt-portal-timeline__title--done,
.bt-portal-timeline__title--current { color: #3A2A24; }
.bt-portal-timeline__title--pending { color: #9A8B80; }
.bt-portal-timeline__when {
  font-size: 11.5px;
  color: #9A8B80;
}
.bt-portal-timeline__desc {
  font-size: 13px;
  color: #6B5A50;
  line-height: 1.5;
}

/* C02 — conversación pública (mensajes cliente/agente, sin notas internas) */
.bt-portal-conversation {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid #F2ECE5;
  padding-top: 16px;
}
.bt-portal-message {
  border: 1px solid #EDE7DF;
  border-radius: 10px;
  padding: 12px 14px;
}
.bt-portal-message--agent {
  border-color: var(--bt-primary);
  background: var(--bt-primary-tint);
}
.bt-portal-message__meta {
  font-size: 11.5px;
  color: #9A8B80;
  margin-bottom: 4px;
}
.bt-portal-message__body {
  font-size: 13.5px;
  color: #3A2A24;
  line-height: 1.5;
}

/* C02 — cómo agregar información (vía correo: no hay formulario de respuesta
   en el portal, el flujo real es responder el correo → mail-ingest). */
.bt-portal-followup {
  border-top: 1px solid #F2ECE5;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bt-portal-followup strong {
  font-size: 13px;
  color: #3A2A24;
}
.bt-portal-followup p {
  margin: 0;
  font-size: 13px;
  color: #6B5A50;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .bt-portal-content { padding: 24px 20px; }
  .bt-portal-fields-2 { grid-template-columns: 1fr; }
  .bt-portal-types { grid-template-columns: repeat(2, 1fr); }
  .bt-portal-ticket-head { flex-direction: column; }
}