/* panel-tarjetas.css · NEXO · 04/10/2026 (Manu, maqueta aprobada «Sí, móntalo así»).
   Estética de las tarjetas del Portal de clientes para Proyectos Web, Proyectos SEO y Bolsas de horas:
   cabecera azul, vista general con una tarjeta por cliente, y al pulsar, la ficha a todo lo ancho con «← Todos». */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{--tg-cab:#00536e;--tg-marca:#006687;--tg-marca2:#83cbce;--tg-bg:#f4f7f8;--tg-texto:#172b33;--tg-mut:#5e6c72;--tg-linea:#dfe6e9}
body.tg{font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--tg-bg)}
body.tg button,body.tg input,body.tg select,body.tg textarea{font-family:inherit}
/* Cabecera */
.tg-top{background:var(--tg-cab)!important;color:#fff;min-height:56px;padding:10px 16px!important;display:flex;align-items:center;gap:10px;flex-wrap:wrap;position:sticky;top:0;z-index:50}
.tg-top h1{font-size:17px!important;font-weight:800!important;margin:0;color:#fff}
.tg-top .sub{color:rgba(255,255,255,.72)!important}
.tg-top .tg-tit{margin-right:auto;min-width:0}
.tg-busca{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border-radius:8px;padding:0 10px;min-height:36px;width:min(280px,100%)}
.tg-busca .mi{font-size:18px;color:rgba(255,255,255,.8)}
.tg-busca input{background:none!important;border:0!important;color:#fff!important;width:100%;outline:none!important;font-size:13px;min-height:34px;padding:0!important}
.tg-busca input::placeholder{color:rgba(255,255,255,.72)}
.tg-btn{display:inline-flex;align-items:center;gap:6px;border:0!important;border-radius:8px!important;background:var(--tg-marca2)!important;color:#00303f!important;padding:8px 12px!important;font-weight:700!important;font-size:13px!important;min-height:36px;cursor:pointer;text-decoration:none;white-space:nowrap}
.tg-btn:hover{background:#9bd7d9!important}
.tg-btn.sec{background:rgba(255,255,255,.14)!important;color:#fff!important}
.tg-btn.sec:hover{background:rgba(255,255,255,.24)!important}
.tg-btn .mi{font-size:18px}
.tg-top .estado-guardado{margin-left:0!important;color:rgba(255,255,255,.8)!important}
/* Vista general */
.tg-general{display:grid;gap:14px}
.tg-chips{display:flex;gap:6px;flex-wrap:wrap}
.tg-chips .chip,.tg-chips .f{border:1px solid var(--tg-linea)!important;background:#fff!important;border-radius:999px!important;padding:5px 12px!important;font-size:12.5px!important;font-weight:700!important;color:var(--tg-mut)!important;cursor:pointer}
.tg-chips .chip.on,.tg-chips .f.on{background:var(--tg-marca)!important;border-color:var(--tg-marca)!important;color:#fff!important}
.tg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px}
.tg-card{position:relative;border:0;border-radius:14px;min-height:132px;padding:15px 17px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;text-align:left;cursor:pointer;
  background:linear-gradient(135deg,#00435a 0%,#006687 50%,#3a9fb0 100%);box-shadow:0 6px 18px rgba(0,40,55,.16);transition:transform .15s,box-shadow .15s;overflow:hidden;font:inherit;width:100%}
.tg-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,40,55,.24)}
.tg-card:focus-visible{outline:3px solid var(--tg-marca2);outline-offset:2px}
.tg-card.off{background:linear-gradient(135deg,#5e6c72 0%,#7d8b91 100%)}
.tg-card::after{content:"";position:absolute;right:-18px;bottom:-18px;width:110px;height:110px;border-radius:24px;background:rgba(255,255,255,.08);transform:rotate(18deg);pointer-events:none}
.tg-card h3{margin:0;font-size:17px;font-weight:800;line-height:1.2;color:#fff;overflow-wrap:anywhere}
.tg-card p{margin:3px 0 0;font-size:12.5px;opacity:.85;color:#fff;overflow-wrap:anywhere}
.tg-card .tg-barra{height:5px;border-radius:3px;background:rgba(255,255,255,.22);margin-top:10px;position:relative;z-index:1;overflow:hidden}
.tg-card .tg-barra i{display:block;height:100%;background:#fff}
.tg-card .tg-mini{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;position:relative;z-index:1}
.tg-card .tg-mini span{background:rgba(255,255,255,.2);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;color:#fff}
.tg-card .tg-mini span.r{background:#fff;color:#a3352c}
.tg-vacio{color:var(--tg-mut);font-size:13px;padding:18px 4px}
/* Ficha */
.tg-volver{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--tg-linea);background:#fff;border-radius:8px;padding:7px 12px;font-weight:700;font-size:13px;color:var(--tg-texto);cursor:pointer;margin-bottom:12px}
.tg-volver:hover{background:#eef6f7}
.tg-volver .mi{font-size:18px}
.tg-chips[hidden],.tg-volver[hidden],.tg-grid[hidden]{display:none!important}
.tg-card .tg-mini span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg-chips .chip,.tg-chips .f{white-space:nowrap}