/* portal.css — EL PORTAL DE CLIENTES vestido de ERP con la marca (usuario, 2026-10-09: «navbar left…
   breadcrumbs… look más profesional de ERP»). Bootstrap 5 por debajo; aquí la marca (papel, tinta,
   rojo de la casa, Newsreader en títulos) y el marco: menú lateral fijo, barra superior, contenido.
   También lo cargan las páginas públicas de cuenta (login, recuperar) con _LayoutPublico. */

:root {
  --papel: #FBFAF7; --tinta: #17171B; --tinta-suave: #3E3E45; --gris: #6B6B72; --linea: #E4E1D8;
  --sello: #BE1E2D; --sello-tinta: #8C1420; --sello-tinte: #FFF6F4; --verde-ok: #1E6E42;
  --menu-ancho: 250px;
  --bs-body-bg: var(--papel);
  --bs-body-color: var(--tinta);
  --bs-body-font-family: "IBM Plex Sans", system-ui, sans-serif;
  --bs-primary: #BE1E2D; --bs-primary-rgb: 190, 30, 45;
  --bs-link-color: #BE1E2D; --bs-link-color-rgb: 190, 30, 45;
  --bs-link-hover-color: #8C1420; --bs-link-hover-color-rgb: 140, 20, 32;
  --bs-border-color: var(--linea);
  --bs-secondary-color: var(--gris);
}
.serif, .portal h1, .portal h2, .portal h3 { font-family: "Newsreader", Georgia, serif; font-weight: 500; letter-spacing: -0.01em; }
.portal .mono, .portal .num { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.portal .num { text-align: right; }

/* Botones con la marca */
.portal .btn-primary { --bs-btn-bg: #BE1E2D; --bs-btn-border-color: #BE1E2D; --bs-btn-hover-bg: #8C1420; --bs-btn-hover-border-color: #8C1420; --bs-btn-active-bg: #8C1420; --bs-btn-active-border-color: #8C1420; }
.portal .btn-outline-primary { --bs-btn-color: #BE1E2D; --bs-btn-border-color: #BE1E2D; --bs-btn-hover-bg: #BE1E2D; --bs-btn-hover-border-color: #BE1E2D; --bs-btn-active-bg: #BE1E2D; }
.portal .btn-dark { --bs-btn-bg: #17171B; --bs-btn-border-color: #17171B; --bs-btn-hover-bg: #3E3E45; --bs-btn-hover-border-color: #3E3E45; }
.portal .btn-light { --bs-btn-bg: #fff; --bs-btn-border-color: var(--linea); --bs-btn-hover-bg: #f4f2ec; --bs-btn-hover-border-color: #d8d4c8; }
.portal .btn { border-radius: 8px; }
.portal .btn-check:checked + .btn-outline-primary { background: #BE1E2D; border-color: #BE1E2D; color: #fff; }
.portal .form-control:focus, .portal .form-check-input:focus { border-color: #BE1E2D; box-shadow: 0 0 0 .2rem rgba(190,30,45,.15); }
.portal .form-check-input:checked { background-color: #BE1E2D; border-color: #BE1E2D; }
/* background-COLOR, no background: el atajo borraba la flecha de los desplegables (Bootstrap la pinta como
   background-image) y los <select> parecían cajas de texto (usuario, 2026-10-11: «no aparece la flechita»). */
.portal .form-control, .portal .form-select { border-radius: 8px; background-color: #fff; }
.portal .form-select { cursor: pointer; }
.portal .form-select:focus { border-color: #BE1E2D; box-shadow: 0 0 0 .2rem rgba(190,30,45,.15); }
.portal .form-label { font-family: "IBM Plex Mono", monospace; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); margin-bottom: 4px; }
.portal .form-text { color: var(--gris); font-size: 0.8rem; }

/* ── El marco ── */
body.portal { min-height: 100vh; }
/* !important: .offcanvas-lg de Bootstrap pone fondo transparente y borde 0 en escritorio, y tapaba el fondo oscuro. */
.portal-menu { position: fixed; top: 0; left: 0; bottom: 0; width: var(--menu-ancho); background: #17171B !important; color: #d9d4cc; display: flex; flex-direction: column; z-index: 1040; }
@media (min-width: 992px) { .portal-menu { transform: none; visibility: visible; } }
.portal-marca { padding: 18px 20px 14px; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; }
.portal-marca a { font-family: "Newsreader", Georgia, serif; font-size: 1.25rem; color: #fbfaf7; text-decoration: none; font-weight: 500; }
.portal-marca .punto { color: #ff5a68; }
.portal-marca .btn-close { filter: invert(1); }
.portal-nav { padding: 10px 12px 20px; overflow-y: auto; flex: 1; }
.portal-nav-seccion { margin: 18px 10px 6px; font-family: "IBM Plex Mono", monospace; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: #8a867e; }
.portal-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #d9d4cc; text-decoration: none; font-size: 0.92rem; }
.portal-nav-item .bi { font-size: 1rem; opacity: .85; width: 18px; text-align: center; }
.portal-nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.portal-nav-item.active { background: #BE1E2D; color: #fff; }
.portal-nav-item .portal-ext { margin-left: auto; font-size: 0.7rem; opacity: .55; }
.portal-nav-etiqueta { margin-left: auto; font-family: "IBM Plex Mono", monospace; font-size: 0.58rem; letter-spacing: 0; padding: 1px 5px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); color: #d9d4cc; white-space: nowrap; }
.portal-nav-item.active .portal-nav-etiqueta { border-color: rgba(255,255,255,.6); color: #fff; }

.portal-cuerpo { margin-left: var(--menu-ancho); min-height: 100vh; display: flex; flex-direction: column; }
.portal-barra { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: 12px; padding: 10px 28px; background: #fff; border-bottom: 1px solid var(--linea); }
.portal-barra .breadcrumb { font-size: 0.9rem; --bs-breadcrumb-divider: '›'; }
.portal-barra .breadcrumb a { color: var(--gris); text-decoration: none; }
.portal-barra .breadcrumb a:hover { color: var(--sello); }
.portal-barra .breadcrumb-item.active { color: var(--tinta); font-weight: 500; }
.portal-usuario { border-radius: 999px; font-size: 0.9rem; }
.portal-contenido { padding: 26px 28px 40px; max-width: 1400px; width: 100%; }
.portal-titulo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; }
.portal-titulo h1 { margin: 0; font-size: 1.7rem; }
.portal-titulo .acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.portal-pie { margin-top: auto; padding: 14px 28px; font-size: 0.78rem; color: var(--gris); border-top: 1px solid var(--linea); }
/* Aviso: un fondo de color, sin la franja lateral (usuario, 2026-10-11: «salta a la vista que lo ha diseñado Claude Code»). */
.portal-aviso { background: #fbf1d9; border: 0; color: var(--tinta); border-radius: 6px; padding: 12px 16px; }

@media (max-width: 991.98px) {
  .portal-cuerpo { margin-left: 0; }
  .portal-menu { width: 280px; }
  .portal-barra, .portal-contenido, .portal-pie { padding-left: 16px; padding-right: 16px; }
}

/* ── Tarjetas y pestañas ── */
.portal .card { border: 1px solid var(--linea); border-radius: 12px; background: #fff; }
.portal .card-header { background: #fff; border-bottom: 1px solid var(--linea); border-radius: 12px 12px 0 0 !important; font-family: "Newsreader", Georgia, serif; font-size: 1.1rem; padding: 12px 18px; display: flex; align-items: center; gap: 10px; }
.portal .card-header small { font-family: "IBM Plex Mono", monospace; font-size: 0.66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.portal .card-body { padding: 18px; }
.portal .nav-tabs { border-bottom: 1px solid var(--linea); margin-bottom: 18px; }
.portal .nav-tabs .nav-link { color: var(--gris); border: 0; border-bottom: 2px solid transparent; padding: 8px 14px; }
.portal .nav-tabs .nav-link:hover { color: var(--tinta); border-color: transparent; }
/* La activa se marca con color y raya, sin negrita: la negrita ensanchaba la pestaña y las demás bailaban. */
.portal .nav-tabs .nav-link.active { color: var(--sello); background: transparent; border-bottom-color: var(--sello); }
.portal .nav-tabs .corto { display: none; }
@media (max-width: 600px) {
    /* En el móvil, una sola línea con el nombre corto («Datos», «Claves»…), nunca dos filas de pestañas. */
    .portal .nav-tabs { flex-wrap: nowrap; }
    .portal .nav-tabs .nav-link { padding: 8px 9px; white-space: nowrap; }
    .portal .nav-tabs .nav-link i { display: none; }
    .portal .nav-tabs .largo { display: none; }
    .portal .nav-tabs .corto { display: inline; }
}

/* ── Las pestañas de una cuenta, todas con la misma forma ──
   1) .portal-intro: qué es esto y qué puedes hacer aquí; 2) el contenido; 3) .portal-accion: la tarjeta
   del formulario (crear una clave, dar acceso), con la casilla y el botón en la misma línea y la ayuda debajo. */
/* La introducción es texto bajo el título, sin caja ni franja de color (usuario, 2026-10-11). */
.portal-intro { margin-bottom: 16px; font-size: 0.95rem; }
.portal-intro p { margin: 0; }
.portal-intro p + p, .portal-intro p + .portal-intro-papeles { margin-top: 10px; }
.portal-intro-papeles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; font-size: 0.86rem; }
.portal-intro-papeles .text-muted { margin-top: 2px; }
@media (max-width: 600px) { .portal-intro-papeles { grid-template-columns: 1fr; } }
.portal-accion { margin-top: 16px; }
.portal-accion .fila { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.portal-accion .fila .campo { flex: 1 1 260px; min-width: 0; }
.portal-accion .fila .btn { white-space: nowrap; }
.portal-accion .ayuda { margin-top: 10px; font-size: 0.84rem; color: var(--gris); }
.portal-accion p:last-child { margin-bottom: 0; }

/* Cifras de Inicio */
.portal-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 22px; }
.portal-cifra { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 14px 18px; text-decoration: none; color: inherit; display: block; }
.portal-cifra:hover { border-color: #d8d4c8; color: inherit; }
.portal-cifra .rotulo { font-family: "IBM Plex Mono", monospace; font-size: 0.66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); }
.portal-cifra .valor { font-family: "Newsreader", Georgia, serif; font-size: 2rem; line-height: 1.1; margin: 4px 0 2px; }
.portal-cifra .nota { font-size: 0.8rem; color: var(--gris); }

/* Datos clave-valor */
.portal-datos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; font-size: 0.95rem; }
.portal-datos dt { font-family: "IBM Plex Mono", monospace; font-size: 0.66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); align-self: center; font-weight: 400; }
.portal-datos dd { margin: 0; }
@media (max-width: 600px) { .portal-datos { grid-template-columns: 1fr; } }

/* Píldoras (alcance, estados) */
.portal-pildora { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--linea); background: #faf8f4; font-size: 0.78rem; margin: 2px 4px 2px 0; }
.portal-pildora.on { border-color: var(--sello); color: var(--sello); background: var(--sello-tinte); font-weight: 600; }
.portal-estado { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; }
.portal-estado.ok { background: #e3f5ea; color: var(--verde-ok); }
.portal-estado.off { background: #f1f0ec; color: var(--gris); }
.portal-estado.alerta { background: #fdeedd; color: #b25607; }

/* ── El patrón de mantenimiento ── */
.portal-mant-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.portal-mant-barra .buscador { max-width: 340px; }
.portal-mant-barra .nuevo { margin-left: auto; }
.portal .table { --bs-table-bg: #fff; margin-bottom: 0; font-size: 0.92rem; }
.portal .table thead th { font-family: "IBM Plex Mono", monospace; font-size: 0.66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); font-weight: 500; background: #faf8f4; border-bottom: 2px solid var(--linea); padding: 10px 12px; white-space: nowrap; }
.portal .table thead th[data-ordenar] { cursor: pointer; user-select: none; }
.portal .table thead th[data-ordenar]:hover { color: var(--tinta); }
.portal .table thead th .flecha { opacity: .35; margin-left: 4px; }
.portal .table thead th.asc .flecha, .portal .table thead th.desc .flecha { opacity: 1; color: var(--sello); }
.portal .table tbody td { padding: 10px 12px; border-bottom: 1px solid #f0eee8; vertical-align: middle; }
.portal .table tbody a { color: var(--tinta); text-decoration: none; }
.portal .table tbody a:hover { color: var(--sello); text-decoration: underline; }
.portal .table tbody tr.abrible { cursor: pointer; }
.portal .table tbody tr.abrible:hover td { background: #faf8f4; }
.portal .table tbody tr.atenuada td { color: var(--gris); }
.portal .table .acciones { text-align: right; white-space: nowrap; }
.portal .table .acciones .btn { padding: 3px 10px; font-size: 0.8rem; }
.portal .table .acciones form { display: inline; }
.portal-mant-pie { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 0.84rem; color: var(--gris); }
.portal-mant-pie .pagina { margin-left: auto; display: flex; gap: 4px; }
.portal-mant-vacio { padding: 26px; text-align: center; color: var(--gris); }
/* Columnas que sobran en el móvil (Nombre, Alta, Creada…): fuera, para que el estado y los botones se vean sin desplazar. */
@media (max-width: 767.98px) {
    .portal .table .solo-pc { display: none; }
    .portal .table tbody td, .portal .table thead th { padding-left: 8px; padding-right: 8px; }
    .portal .table tbody td { overflow-wrap: break-word; }
    .portal .solo-pc-inline { display: none; }
    /* Los botones de fila, solo con su icono (el texto queda para lectores de pantalla y en el título). */
    .portal .table .acciones .texto { display: none; }
}
.portal-estado { white-space: nowrap; }
@media (min-width: 768px) { .portal .solo-movil { display: none; } }

/* La clave recién creada: se enseña UNA vez */
.portal-clave-nueva { border: 1.5px solid var(--sello); border-radius: 10px; background: var(--sello-tinte); padding: 14px 16px; margin-bottom: 16px; }
.portal-clave-nueva code { display: block; margin: 8px 0; padding: 10px 12px; background: #17171B; color: #fbfaf7; border-radius: 8px; font-family: "IBM Plex Mono", monospace; font-size: 0.95rem; word-break: break-all; user-select: all; }

/* ── Páginas públicas de cuenta (login, recuperar, contraseña), con _LayoutPublico ── */
.portal-centro { min-height: calc(100vh - 140px); display: grid; place-items: center; padding: 40px 0; }
.portal-caja { width: 100%; max-width: 440px; }
.portal-caja .form-panel { padding: 32px 32px 28px; }
.portal-caja h1 { font-size: 1.6rem; margin-bottom: 8px; }
.portal-caja .intro { margin: 0 0 20px; color: var(--gris); font-size: 0.92rem; }
.c-8 { grid-column: span 8; }
@media (max-width: 760px) { .c-8 { grid-column: span 12; } }