/* Escritorio: barra arriba, hasta tres columnas de piezas; en el teléfono, pestañas abajo. */
.barraEsc{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;min-height:28px}
.bandeja{display:flex;align-items:center;gap:4px;flex-wrap:wrap;border:1px dashed var(--linea);border-radius:10px;padding:3px 6px;color:var(--tenue)}
.bandeja .trae{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--tenue)}
.bandeja .trae:hover{background:var(--roce);color:var(--tinta)}
.bandeja .trae svg{width:19px;height:19px}
.cols{display:grid;gap:14px;align-items:start}
.col{display:flex;flex-direction:column;gap:14px;min-width:0}
.pieza{min-width:0;display:flex;flex-direction:column;gap:6px}
.pcab{display:flex;align-items:center;gap:6px;height:30px}
.pcab h3{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcab .b{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--tenue);font-size:15px}
.pcab .b:hover{background:var(--roce);color:var(--tinta)}
.panel{background:var(--pieza);border:1px solid var(--linea);border-radius:14px;padding:14px;min-width:0;display:flex;flex-direction:column;gap:12px}
.pieza.encogida .panel{display:none}
.formas{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.formas .pill{padding:4px 11px;font-size:12px}
.formas .der{margin-left:auto}
.punto{width:8px;height:8px;border-radius:50%;flex:none;background:var(--tenue)}
.punto.ambar{background:var(--ambar)} .punto.coral{background:var(--coral)} .punto.ok{background:var(--ok)}
.camino{font-size:12px;color:var(--tenue);display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.camino button{color:var(--azul)}
.fcab{display:flex;align-items:center;gap:12px}
.fcab h2{font-size:22px;font-weight:600}
.rel{display:flex;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid var(--linea);font-size:14px;min-width:0}
.rel .k{color:var(--tenue);font-size:12px;width:90px;flex:none}
.rel .v{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seccion{font-size:12px;color:var(--tenue);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.seg2{display:inline-flex;border:1px solid var(--linea);border-radius:999px;padding:2px}
.seg2 button{padding:4px 12px;border-radius:999px;font-size:13px}
.seg2 button[aria-pressed="true"]{background:var(--azulT);outline:1px solid var(--azul)}
.codigoGrande{font-family:var(--f-mide);font-size:40px;letter-spacing:.2em;color:var(--azul);text-align:center}
.tip{position:fixed;z-index:50;pointer-events:none;background:var(--pieza);border:1px solid var(--linea);border-radius:10px;padding:8px 10px;font-size:12px;max-width:260px;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.tip b{display:block;font-size:13px;margin-bottom:2px}
.entrar{max-width:440px;margin:6vh auto 0;background:var(--pieza);border:1px solid var(--linea);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:12px;position:relative}
.tabsCel{display:none}
/* asistencia */
.dias{display:flex;gap:4px;flex-wrap:wrap}
.dias .pill{padding:3px 9px;font-size:12px}
.dias .pill:disabled{opacity:.35;cursor:default}
.semNav{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--tenue)}
.semNav .accion:disabled{opacity:.35}
.tl{display:grid;grid-template-columns:132px 1fr;gap:5px 10px;align-items:center;font-size:13px}
.tl .nom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;text-align:left;color:inherit}
.tl .nom:hover{color:var(--azul)}
.carril{position:relative;height:18px;border-radius:4px;background:var(--roce)}
.carril .hor{position:absolute;top:0;bottom:0;border:1px dashed var(--linea);border-radius:4px}
.carril .seg{position:absolute;top:4px;bottom:4px;border-radius:3px;background:var(--azul)}
.carril .seg.vivo{background:var(--cian)}
.carril .seg.abierto{background:var(--coral)}
.carril .tarde{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ambar);border-radius:2px}
.carril .ahora{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--tinta);opacity:.5}
.eje{position:relative;height:16px;font-size:10px;color:var(--tenue);grid-column:2}
.eje span{position:absolute;transform:translateX(-50%)}
.sem th.c,.sem td.c{text-align:center}
.sem td.c{font-family:var(--f-mide);font-size:12px}
.c.retardo{color:var(--ambar);font-weight:600}
.c.falta{color:var(--coral)}
.c.sinsalida{color:var(--coral);font-weight:600}
.c.desc{color:var(--tenue)}
.barra.toca{cursor:pointer}
.barra .tr i.encima{background:var(--ambar);border-radius:0 4px 4px 0}
.ctx{font-size:13px;color:var(--tenue)}
.tach{text-decoration:line-through;color:var(--tenue)}
.checadas td{vertical-align:middle}
.checadas .diaC{color:var(--tenue);width:56px;white-space:nowrap}
.checs{white-space:normal;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.chec{display:inline-flex;align-items:center;gap:4px;font-size:13px;padding:3px 7px;border-radius:7px;border:1px solid transparent;color:inherit}
button.chec:hover,button.chec:focus-visible{border-color:var(--linea);background:var(--roce)}
.chec .sim{width:13px;height:13px;color:var(--azul)}
.reng.sub2{padding-left:44px;font-size:13px}
@media (max-width:700px){
  .casa .ocultaCel{display:none}
  .cols{display:block!important}
  .col{display:contents}
  .pieza{display:none}
  .pieza.activa{display:flex}
  .pieza .bEnc,.pieza .bEsc{display:none}
  .pcab h3{font-size:22px;letter-spacing:-.01em;text-transform:none;color:var(--tinta)}
  .bandeja{display:none}
  .tabsCel{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--pieza);border-top:1px solid var(--linea);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));gap:4px;justify-content:space-around}
  .tabsCel button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10px;color:var(--tenue);padding:6px 8px;border-radius:999px;min-width:44px}
  .tabsCel button[aria-selected="true"]{color:var(--tinta);font-weight:700;background:var(--roce)}
  .tabsCel svg{width:22px;height:22px}
  .hojaMas{position:absolute;bottom:calc(100% + 8px);right:8px;background:var(--pieza);border:1px solid var(--linea);border-radius:16px;padding:8px;display:flex;flex-direction:column;gap:2px;box-shadow:0 10px 30px rgba(0,0,0,.3)}
  .hojaMas button{flex-direction:row!important;gap:10px!important;font-size:14px!important;color:var(--tinta)!important;padding:10px 14px!important;border-radius:10px!important}
  .barra{grid-template-columns:90px 1fr 60px}
  .tl{grid-template-columns:84px 1fr}
  .reng.sub2{padding-left:8px}
  .formas .der{margin-left:0;width:100%;justify-content:flex-end}
}
.rel select{background:var(--fondo);color:var(--tinta);border:1px solid var(--linea);border-radius:8px;padding:5px 8px;font:inherit;font-size:13px;max-width:100%;min-width:0}
.rel .v{min-width:0}
@media (max-width:700px){.rel .sub.mono{display:none}}
.qrMi{background:#fff;border-radius:12px;padding:10px;width:180px}
.qrMi svg{display:block;width:100%;height:auto}
.llavesL{display:flex;flex-direction:column;gap:4px;padding:2px 2px 8px 100px;font-size:12px;color:var(--tenue)}
.llavesL div{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.llavesL .sim{width:14px;height:14px}
@media (max-width:700px){.llavesL{padding-left:2px}}
.chip.sello{display:inline-flex;align-items:center;padding:3px 7px}
.chip.sello .sim{width:14px;height:14px}

/* la bandeja dice el nombre de cada pieza (para quien empieza); en el celular solo el icono */
.bandeja .trae{width:auto;padding:0 8px;display:inline-flex;align-items:center;gap:6px}
.trae .nomp{font-size:12.5px;color:var(--tenue)}
@media (max-width:600px){.trae .nomp{display:none}.bandeja .trae{width:32px;padding:0;justify-content:center}}
/* el nombre de la tablet no se corta: el renglón baja de línea */
.renglones .reng.tab{flex-wrap:wrap}
.renglones .reng.tab .tx{white-space:normal;min-width:6em}
/* Tu mes: barras al 100 %, listas y expedientes (colores de barra validados en claro y oscuro; siempre con número y nombre) */
:root{--bOk:#1E9E7E;--bAmbar:#E3A83B;--bCoral:#D64A3F;--bAzul:#1F5FD1}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bOk:#20A080;--bAmbar:#BD8226;--bCoral:#DB4A6E;--bAzul:#3D8BFF}}
:root[data-theme="dark"]{--bOk:#20A080;--bAmbar:#BD8226;--bCoral:#DB4A6E;--bAzul:#3D8BFF}
.mPieza{display:flex;flex-direction:column;gap:14px;min-width:0}
.mNav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mMes{display:flex;align-items:center;gap:6px;font-size:14px}
.mMes .accion.icono{width:30px;height:30px}
.mBusca{margin-left:auto}
.mBusca input{border:1px solid var(--linea);background:var(--fondo);border-radius:8px;padding:6px 10px;font-size:13px;color:var(--tinta);width:170px}
.mVolver{padding:6px 12px 6px 8px;border-radius:999px}
.mMigas{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:12px;color:var(--tenue);min-width:0}
.mMigas button{text-decoration:underline;text-underline-offset:3px;color:var(--tinta)}
.mMigas .sep{opacity:.6}
.mSec{display:flex;flex-direction:column;gap:14px}
.mSec+.mSec{border-top:1px solid var(--linea);padding-top:14px}
.mTit{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--tenue);font-weight:600;flex-wrap:wrap}
.mTit .sim{width:16px;height:16px}
.mSub{text-transform:none;letter-spacing:0;font-weight:400;font-size:12px}
.mBloque{display:flex;flex-direction:column;gap:6px}
.mCab{display:flex;align-items:baseline;gap:8px;font-size:14px;width:fit-content;text-align:left}
.mCab:hover{text-decoration:underline;text-underline-offset:3px}
.mCab b{font-family:var(--f-mide);font-size:19px;font-weight:500}
.mBarra{display:flex;gap:2px;height:14px}
.mBarra button{display:block;height:100%;min-width:6px}
.mBarra button:hover{outline:2px solid var(--tinta);outline-offset:1px}
.mBarra button:first-child{border-radius:4px 0 0 4px}.mBarra button:last-child{border-radius:0 4px 4px 0}.mBarra button:only-child{border-radius:4px}
.mVacia{flex:1;border:1px dashed var(--linea);border-radius:4px}
.mLey{display:flex;flex-wrap:wrap;gap:3px 12px;font-size:12.5px;color:var(--tenue)}
.mLey button{display:inline-flex;align-items:center;gap:5px;color:inherit}
.mLey button:hover{color:var(--tinta);text-decoration:underline}
.mLey b{color:var(--tinta);font-family:var(--f-mide);font-weight:500}
.mLey i{width:9px;height:9px;border-radius:3px;flex:none}
.mUni{display:grid;grid-template-columns:56px 1fr 84px;gap:8px;align-items:center;font-size:12.5px;padding:2px 0;border-radius:6px;text-align:left}
.mUni:hover{background:var(--roce)}
.mUni i{display:block;height:11px;border-radius:0 4px 4px 0;background:var(--bAzul)}
.mUni span:last-child{text-align:right}
.mH2{font-size:19px;font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mH2 .sim{width:20px;height:20px}
.mFolio{font-family:var(--f-mide);font-size:12px;font-weight:400;color:var(--tenue);border:1px solid var(--linea);border-radius:999px;padding:1px 9px}
.mLista{display:flex;flex-direction:column}
.mReng{display:flex;align-items:center;gap:9px;padding:8px 4px;border-top:1px solid var(--linea);font-size:13.5px;width:100%;text-align:left;border-radius:8px;min-width:0}
.mReng:first-child{border-top:0}
.mReng:hover{background:var(--roce)}
.mReng .tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mReng .acc{width:15px;height:15px;color:var(--tenue);flex:none}
.mDer{font-size:12px;color:var(--tenue);white-space:nowrap}
.mPunto{width:9px;height:9px;border-radius:3px;flex:none}
.mNada{color:var(--tenue);font-size:13px;padding:8px 4px}
.mFam{display:flex;flex-direction:column;gap:4px}
.mDato{display:grid;grid-template-columns:130px 1fr;gap:8px;font-size:13.5px;padding:6px 0;border-top:1px solid var(--linea)}
.mDato:first-child{border-top:0}
.mDato>span:first-child{color:var(--tenue)}
@media (max-width:640px){.mDato{grid-template-columns:1fr;gap:2px}.mBusca{margin-left:0}.mBusca input{width:100%}}
.mLiga{text-decoration:underline;text-underline-offset:3px;color:var(--tinta);text-align:left}
.mTachado{text-decoration:line-through;color:var(--tenue)}
.mSello{display:flex;align-items:center;gap:10px;border-radius:12px;padding:10px 12px;background:var(--okT);font-size:13.5px}
.mSello .sim{width:18px;height:18px;color:var(--ok);flex:none}
.mSello.mal{background:var(--coralT)}.mSello.mal .sim{color:var(--coral)}
.mSello.abierta{background:var(--roce)}.mSello.abierta .sim{color:var(--tenue)}
.mRels{display:flex;flex-wrap:wrap;gap:8px}
.mRel{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linea);border-radius:999px;padding:5px 12px;font-size:13px}
.mRel:hover{background:var(--roce)}
.mRel .sim{width:15px;height:15px}
.mRel.luego{opacity:.6;border-style:dashed;cursor:default}
.mImpresa .mNav,.mImpresa .mImp,.mImpresa .acc,.mImpresa .mRels{display:none!important}
.mImpresa,.mImpresa *{color:#111!important;background:transparent!important}