/* ==========================================================================
   OS1®  ·  Portal de clientes  ·  master.css
   --------------------------------------------------------------------------
   Hoja maestra del portal (zona privada de relación con el cliente).
   Deriva 1:1 del boceto aprobado: OS1_Portal_Clientes_Bocetos_v1_0.html (S14).
   Tres voces: PP Editorial New declara · Inter opera · IBM Plex Mono registra.

   Docroot: portal.os1.mx/ (subdominio propio, hermano de public_html).
   Las rutas absolutas resuelven DENTRO del docroot del portal:
     · Fuentes  →  /fts/    (copia local del portal — no comparte con os1.mx)
     · Logo     →  /assets/OS1_Logo_Color_Invertido.png
   ========================================================================== */


/* ---------- 1 · Tipografías (servidas localmente, sin terceros) ----------- */
/* El portal, tal como está diseñado, usa solo los pesos regulares (400).
   Set mínimo: 4 archivos. Los pesos de énfasis quedan abajo como reserva
   comentada: se activan solo si contenido real los requiere (licencia/archivo
   primero, luego se descomenta). */
@font-face{font-family:'PP Editorial New';src:url('/fts/PPEditorialNew-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'PP Editorial New';src:url('/fts/PPEditorialNew-Italic.woff2')  format('woff2');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Inter';src:url('/fts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('/fts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}

/* Reserva — descomentar y subir el archivo si se necesita énfasis:
@font-face{font-family:'Inter';src:url('/fts/Inter-Medium.woff2')   format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('/fts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('/fts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
*/


/* ---------- 2 · Tokens de marca ------------------------------------------- */
:root{
  --ink:#0A0A0A; --paper:#F5F5F4; --red:#B11226; --grey:#8A8987; --faint:#4A4A48;
  --logo:url('/assets/OS1_Logo_Color_Invertido.png');
  --serif:'PP Editorial New',Georgia,serif;
  --sans:'Inter',Arial,sans-serif;
  --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;}


/* ---------- 3 · Armazón de aplicación (adaptado del boceto a página real) -- */
/* En el boceto, .frame era una caja de vista previa de 560px sobre una hoja
   gris. En producción, .frame es la pantalla: barra fija + contenido que fluye. */
.frame{display:flex;min-height:100vh;background:var(--paper);}
.frame.login{background:var(--ink);align-items:center;justify-content:center;min-height:100vh;}


/* ---------- 4 · Barra lateral --------------------------------------------- */
.side{width:178px;flex:none;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;padding:22px 0;position:sticky;top:0;height:100vh;align-self:flex-start;}
.side .brand{padding:0 20px 22px;border-bottom:.5px solid rgba(245,245,244,.1);margin-bottom:6px;}
.side .lg{width:92px;height:54px;background:var(--logo) left center/contain no-repeat;}
.side .eb{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,245,244,.42);margin-top:14px;}
.nav{display:flex;flex-direction:column;font-size:13.5px;margin-top:8px;}
.nav a{padding:10px 20px;color:rgba(245,245,244,.6);text-decoration:none;border-left:2px solid transparent;}
.nav a.on{color:var(--paper);border-left:2px solid var(--red);background:rgba(245,245,244,.05);}
.who{margin-top:auto;padding:16px 20px 0;border-top:.5px solid rgba(245,245,244,.1);}
.who .role{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,245,244,.42);}
.who .nm{font-family:var(--serif);font-size:14.5px;margin-top:4px;}


/* ---------- 5 · Contenido y tipografía base ------------------------------- */
.content{flex:1;min-width:0;padding:30px 34px;}
.eb{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey);}
.eb.red{color:var(--red);}
.h1{font-family:var(--serif);font-size:27px;letter-spacing:-.01em;margin:8px 0 22px;}
.body{font-size:13.5px;line-height:1.6;color:#1d1d1d;}
.mono{font-family:var(--mono);}
.small{font-size:9.5px;letter-spacing:.05em;}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);}
.row6{display:inline-flex;align-items:center;gap:7px;}


/* ---------- 6 · Cards y métricas ------------------------------------------ */
.card{border:.5px solid rgba(10,10,10,.12);background:#fff;padding:16px 18px;}
.cardhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;}
.metric{border:.5px solid rgba(10,10,10,.12);background:#fff;padding:15px 16px;}
.metric .n{font-family:var(--serif);font-size:30px;line-height:1;}
.metric .n.red{color:var(--red);}
.metric .l{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey);margin-top:9px;}

.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.sect-eb{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin:0 0 11px;}


/* ---------- 7 · Listados auditables --------------------------------------- */
.list{border:.5px solid rgba(10,10,10,.12);background:#fff;}
.li{padding:13px 16px;border-bottom:.5px solid rgba(10,10,10,.08);display:flex;justify-content:space-between;align-items:center;gap:12px;}
.li:last-child{border-bottom:none;}
.li .nmrow{display:flex;align-items:center;gap:9px;}
.li .ttl{font-size:13px;}
.li .meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--grey);}
.tagbox{font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--red);border:.5px solid rgba(177,18,38,.5);padding:3px 9px;white-space:nowrap;}
.tagbox.mut{color:var(--grey);border-color:rgba(10,10,10,.2);}


/* ---------- 8 · Tickets (lista + hilo) ------------------------------------ */
.tk{display:grid;grid-template-columns:230px 1fr;border:.5px solid rgba(10,10,10,.12);background:#fff;min-height:340px;}
.tklist{border-right:.5px solid rgba(10,10,10,.1);}
.titem{padding:13px 15px;border-bottom:.5px solid rgba(10,10,10,.08);border-left:2px solid transparent;}
.titem.on{border-left:2px solid var(--red);background:rgba(177,18,38,.03);}
.titem .tt{font-size:12.5px;margin-bottom:5px;}
.tdetail{display:flex;flex-direction:column;}
.tdhead{padding:15px 20px;border-bottom:.5px solid rgba(10,10,10,.1);}
.thread{flex:1;padding:18px 20px;}
.msg{margin-bottom:15px;}
.msg.r{text-align:right;}
.who2{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);}
.bub{display:inline-block;padding:11px 14px;font-size:12.5px;line-height:1.5;margin-top:6px;max-width:78%;text-align:left;}
.bub.light{background:#fff;border:.5px solid rgba(10,10,10,.14);}
.bub.dark{background:var(--ink);color:var(--paper);}
.reply{padding:13px 20px;border-top:.5px solid rgba(10,10,10,.1);display:flex;gap:10px;align-items:flex-end;}


/* ---------- 9 · Adjuntos y composer --------------------------------------- */
.attach{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);border:.5px solid rgba(10,10,10,.2);padding:4px 9px;margin-top:9px;}
.attach .pin{color:var(--red);}
.bub.dark .attach{color:rgba(245,245,244,.6);border-color:rgba(245,245,244,.25);}
.composer{padding:13px 20px;border-top:.5px solid rgba(10,10,10,.1);}
.composer .ta{width:100%;}
.composer .crow{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:12px;}
.composer .staged{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);border:.5px solid rgba(10,10,10,.2);padding:4px 9px;}
.composer .staged .x{color:var(--grey);}
.attachbtn{border:.5px solid rgba(10,10,10,.3);font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;color:var(--ink);display:inline-flex;align-items:center;gap:7px;}
.attachbtn .plus{color:var(--red);font-family:var(--sans);font-size:14px;line-height:1;}


/* ---------- 10 · Campos y botones ----------------------------------------- */
.ta{background:var(--paper);border:.5px solid rgba(10,10,10,.18);font-size:12.5px;padding:10px 12px;color:var(--grey);min-height:54px;flex:1;font-family:var(--sans);}
.btn-dk{background:var(--ink);color:var(--paper);font-size:12.5px;padding:10px 18px;text-align:center;white-space:nowrap;}
.btn-out{border:.5px solid rgba(10,10,10,.3);font-size:11px;padding:6px 13px;color:var(--ink);display:inline-flex;align-items:center;gap:7px;}
.plus{color:var(--red);}


/* ---------- 11 · Acceso institucional ------------------------------------- */
.loginbox{width:330px;text-align:center;}
.loginbox .lg{width:150px;height:88px;margin:0 auto;background:var(--logo) center/contain no-repeat;}
.loginbox .eb{color:rgba(245,245,244,.45);margin-top:16px;}
.logmotto{font-family:var(--serif);font-style:italic;font-size:16px;color:rgba(245,245,244,.85);margin:10px 0 30px;}
.fld{text-align:left;margin-bottom:14px;}
.fld label{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:rgba(245,245,244,.5);}
.inp{margin-top:7px;border:.5px solid rgba(245,245,244,.22);padding:11px 12px;font-size:13px;color:rgba(245,245,244,.55);background:rgba(245,245,244,.02);}
.btn-lt{background:var(--paper);color:var(--ink);font-size:13px;padding:12px;text-align:center;margin-top:4px;}
.logfoot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;}
.dimc2{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(245,245,244,.4);}
.logbrand{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:rgba(245,245,244,.28);margin-top:26px;}


/* ==========================================================================
   12 · ADICIONES DE PRODUCCIÓN  (reversibles · no alteran el núcleo visual)
   Lo que el boceto no necesitaba por ser estático: estados interactivos,
   controles de formulario reales, foco accesible y comportamiento responsivo.
   ========================================================================== */

/* 12.1 · Elementos interactivos reales (el boceto los dibujaba inertes) */
.nav a,.titem,.btn-dk,.btn-lt,.btn-out,.attachbtn,.li a{cursor:pointer;}
.nav a{transition:color .12s ease,background-color .12s ease;}
.nav a:hover:not(.on){color:rgba(245,245,244,.9);}
.titem{transition:background-color .12s ease;}
.titem:hover:not(.on){background:rgba(10,10,10,.02);}
.btn-dk,.btn-lt{border:none;font-family:var(--sans);transition:opacity .12s ease;}
.btn-dk:hover,.btn-lt:hover{opacity:.9;}
.btn-out,.attachbtn{background:none;font-family:var(--mono);transition:border-color .12s ease;}
.btn-out:hover,.attachbtn:hover{border-color:rgba(10,10,10,.55);}
.li[data-doc],.list a.li{text-decoration:none;color:inherit;}

/* 12.2 · Controles de formulario reales sobre .inp y .ta */
input.inp,textarea.ta,select.inp{appearance:none;-webkit-appearance:none;border-radius:0;width:100%;font-family:inherit;}
input.inp{display:block;color:var(--paper);}
input.inp::placeholder{color:rgba(245,245,244,.45);}
textarea.ta{color:var(--ink);resize:vertical;line-height:1.5;}
textarea.ta::placeholder{color:var(--grey);}

/* 12.3 · Foco accesible — anillo rojo institucional, sobrio */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:1px solid var(--red);outline-offset:2px;
}
input.inp:focus-visible{outline-offset:0;border-color:rgba(245,245,244,.5);}

/* 12.4 · Responsivo — la barra pasa a franja superior; rejillas colapsan */
@media (max-width:760px){
  .frame{flex-direction:column;}
  .side{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;padding:14px 16px;}
  .side .brand{border-bottom:none;padding:0 16px 0 0;margin:0;}
  .nav{flex-direction:row;flex-wrap:wrap;margin-top:0;}
  .nav a{padding:8px 12px;border-left:none;border-bottom:2px solid transparent;}
  .nav a.on{border-left:none;border-bottom:2px solid var(--red);background:none;}
  .who{margin:0 0 0 auto;border-top:none;padding:0;text-align:right;}
  .content{padding:22px 18px;}
  .metrics{grid-template-columns:repeat(2,1fr);}
  .cols{grid-template-columns:1fr;}
  .tk{grid-template-columns:1fr;}
  .tklist{border-right:none;border-bottom:.5px solid rgba(10,10,10,.1);}
  .bub{max-width:90%;}
  .loginbox{width:88%;max-width:330px;}
}