/* Rediseño estético del panel y portal de pgvirtualconsulting.com (NAS) — se carga DESPUÉS de style.css. Solo cambia el aspecto.
   Paleta indicada por el cliente: gris claro #f1f1f1, arena #ebe6e1, terracota #a94f4a, salvia #7d8b7d y negro #161616. Títulos con serifa fina;
   botones rectangulares en mayúsculas con flecha. Versión anterior (azul noche + lima) guardada en propuesta-diseno-web-com/rediseno-com-azul-lima-anterior/.
   Para volver al aspecto original basta quitar el <link> de rediseno-panel.css en templates/base.html y templates/portal/base.html. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Poppins:wght@400;500;600&display=swap');

:root{
  --negro:#161616; --negro-2:#232323; --negro-3:#2e2e2e; --arena:#ebe6e1; --gris:#f1f1f1; --salvia:#7d8b7d; --salvia-d:#5f6d5f; --terracota:#a94f4a; --terracota-d:#8c3f3b;
  /* variables que usa style.css: gráficos y enlaces toman la paleta nueva */
  --navy:#5f6d5f; --navy-deep:#161616; --navy-mid:#2e2e2e; --sky:#a3b0a3; --lime:#a94f4a; --lime-deep:#8c3f3b;
  --ink:#161616; --paper-dim:#f1f1f1; --line:#e6e0da; --line-strong:#d6cfc8; --muted:#6e6862;
  --radius:10px; --radius-sm:6px;
  --shadow-sm:0 1px 2px rgba(22,22,22,.04); --shadow:0 14px 34px rgba(22,22,22,.09);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
}
html[data-tema="oscuro"]{
  --paper:#1f1f1f; --paper-dim:#141414; --ink:#efe9e4; --muted:#a39d97; --line:rgba(255,255,255,.1); --line-strong:rgba(255,255,255,.18);
  --lime:#d97a72; --lime-deep:#d97a72; --navy:#9aa89a; --sky:#8d9b8d;
  --shadow-sm:none; --shadow:0 14px 36px rgba(0,0,0,.45);
}
body{background:var(--paper-dim);}
html[data-tema="oscuro"] body{background:var(--paper-dim);}
::selection{background:rgba(169,79,74,.28);}

/* ---------- tipografía: títulos con serifa fina (como el logo), cuerpo en Inter ---------- */
h1, h2, h3{letter-spacing:-.02em;}
.pagehead h1, .login-card h1, .login-hero h2, .error-box h1{font-family:var(--serif); font-weight:300; letter-spacing:-.03em;}
.pagehead h1, html[data-tema="oscuro"] .pagehead h1{background:none; -webkit-background-clip:border-box; background-clip:border-box; color:#161616; font-size:42px; line-height:1.05;}
html[data-tema="oscuro"] .pagehead h1{color:#f6f1ec;}
.pagehead p{font-size:15px; margin-top:10px;}
.main h2{font-family:var(--serif); font-size:20px; font-weight:400; letter-spacing:-.015em;}
.main{padding:48px 60px 80px; max-width:1320px;}
.pagehead{margin-bottom:38px;}
.stat .n{font-family:var(--serif);}

/* ---------- barra lateral: negra, con acento terracota ---------- */
.sidebar{background:#161616; color:#d8d2cc; border-right:0; box-shadow:none;}
.sidebar .brand{border-bottom:1px solid rgba(255,255,255,.1); padding:6px 10px 22px;}
.sidebar .brand img{height:50px; width:auto;}
.sidebar .brand b{color:#fff; font-weight:500; letter-spacing:-.01em; font-size:15px;}
.sidebar .brand span{color:#9ea89e; letter-spacing:.14em; text-transform:uppercase; font-size:9.5px;}
.sidebar nav{gap:2px;}
.sidebar nav a{border-radius:6px; font-size:13.5px; color:#cdc6bf; padding:10px 14px;}
.sidebar nav a:hover{background:rgba(255,255,255,.06); color:#fff;}
.sidebar nav a.active{background:rgba(255,255,255,.09); color:#fff; box-shadow:inset 3px 0 0 #c9645e;}
.sidebar nav a .ico{color:#9ea89e;}
.sidebar nav a.active .ico{color:#e08d86;}
.sidebar .avatar{background:#2e2e2e; color:#fff; box-shadow:0 0 0 1.5px #c9645e;}
.sidebar .user{border-top:1px solid rgba(255,255,255,.1); color:#9a948e;}
.sidebar .user b{color:#fff;}
.sidebar .user small, .sidebar .sub-user{color:#9a948e;}
.sidebar .user a, button.linklike{color:#e9a39c;}
.sidebar .user a:hover, button.linklike:hover{color:#fff;}
html[data-tema="oscuro"] .sidebar{background:#0d0d0d;}
.topbar{background:#161616 !important; color:#fff; border-bottom:1px solid rgba(255,255,255,.08);}
.topbar img{height:38px;}

/* ---------- botones: rectangulares, en mayúsculas, con flecha en los principales ---------- */
.btn, .btn.lime{border:1px solid #161616; box-shadow:none; filter:none; border-radius:4px; background:#161616; color:#fff;
  font-weight:600; font-size:12px; letter-spacing:.12em; text-transform:uppercase; padding:12px 20px;}
.btn:hover, .btn.lime:hover{filter:none; box-shadow:none; transform:none; background:#333; border-color:#333;}
.btn.sm{font-size:11px; padding:7px 12px; letter-spacing:.08em;}
.btn.lime{background:#a94f4a; border-color:#a94f4a; color:#fff;}
.btn.lime:hover{background:#8c3f3b; border-color:#8c3f3b; color:#fff;}
.pagehead .btn:not(.sm)::after, .quick .btn:not(.sm)::after, .btn.lime:not(.sm)::after{content:"→"; font-size:15px; letter-spacing:0; margin-left:2px; transition:transform .25s var(--ease);}
.pagehead .btn:not(.sm):hover::after, .quick .btn:not(.sm):hover::after, .btn.lime:not(.sm):hover::after{transform:translateX(4px);}
.btn.ghost, .btn.danger{border-width:1px; filter:none; background:transparent; box-shadow:none;}
.btn.ghost{border-color:var(--line-strong); color:#161616;}
.btn.ghost:hover{background:#fff; border-color:#161616; color:#161616;}
.btn.danger{color:#a3392f; border-color:#e3bdb7;}
html[data-tema="oscuro"] .btn{background:#efe9e4; border-color:#efe9e4; color:#161616;}
html[data-tema="oscuro"] .btn:hover{background:#d97a72; border-color:#d97a72; color:#161616;}
html[data-tema="oscuro"] .btn.lime{background:#d97a72; border-color:#d97a72; color:#161616;}
html[data-tema="oscuro"] .btn.lime:hover{background:#e8958d; border-color:#e8958d;}
html[data-tema="oscuro"] .btn.ghost{background:transparent; color:#e6dfd9; border-color:var(--line-strong);}
html[data-tema="oscuro"] .btn.ghost:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.35); color:#fff;}
html[data-tema="oscuro"] .btn.danger{background:transparent; color:#f08e82; border-color:#7b3a33;}

/* ---------- tarjetas: blancas, línea fina, sin sombras ---------- */
.card, .stat, .grafico, .clause, table.list, .tabla-scroll{border-radius:10px; box-shadow:none; background:#fff; border-color:var(--line);}
.card{padding:28px;}
.stat{padding:24px 26px; gap:18px;}
.stat:hover{transform:none; box-shadow:var(--shadow); border-color:var(--line-strong);}
.stat .n{font-weight:300; font-size:44px; letter-spacing:-.03em; color:#161616; line-height:1;}
.stat .l{letter-spacing:.14em; font-size:10.5px; margin-top:8px;}
.stat .ic{border-radius:50%;}
.stat .ic:not(.verde):not(.ambar):not(.rojo){background:#ebe6e1; color:#8c3f3b;}
.stat .ic.verde{background:rgba(95,109,95,.16); color:#4d5b4d;}
html[data-tema="oscuro"] .card, html[data-tema="oscuro"] .stat, html[data-tema="oscuro"] .grafico, html[data-tema="oscuro"] .clause,
html[data-tema="oscuro"] table.list, html[data-tema="oscuro"] .tabla-scroll{background:var(--paper); border-color:var(--line);}
html[data-tema="oscuro"] .stat .n{color:#f6f1ec;}
html[data-tema="oscuro"] .stat .ic:not(.verde):not(.ambar):not(.rojo){background:rgba(217,122,114,.16); color:#e8958d;}

/* ---------- tablas ---------- */
table.list th{background:transparent; letter-spacing:.14em; font-size:10px; padding:16px 18px; border-bottom:1px solid var(--line-strong); color:#6e6862;}
table.list td{padding:17px 18px;}
table.list tbody tr:hover td{background:#f7f4f1;}
table.list a:not(.btn){color:#161616; font-weight:500;}
html[data-tema="oscuro"] table.list th{background:transparent; color:#a39d97;}
html[data-tema="oscuro"] table.list tbody tr:hover td{background:rgba(255,255,255,.04);}
html[data-tema="oscuro"] .main table.list a:not(.btn){color:#efe9e4;}

/* ---------- formularios ---------- */
form input, form textarea, form select{border-radius:4px; border-width:1px; padding:11px 13px; background:#fff;}
form input:focus, form textarea:focus, form select:focus{border-color:#161616; box-shadow:0 0 0 4px rgba(169,79,74,.18); outline:none;}
form label{letter-spacing:.04em;}
html[data-tema="oscuro"] input:focus, html[data-tema="oscuro"] select:focus, html[data-tema="oscuro"] textarea:focus{border-color:#d97a72; box-shadow:0 0 0 4px rgba(217,122,114,.18);}
html[data-tema="oscuro"] input, html[data-tema="oscuro"] select, html[data-tema="oscuro"] textarea,
html[data-tema="oscuro"] form input, html[data-tema="oscuro"] form select, html[data-tema="oscuro"] form textarea, html[data-tema="oscuro"] .tabla-filtro{background:#151515;}
input[type=checkbox], input[type=radio]{accent-color:#a94f4a;}
:focus-visible{outline:3px solid rgba(169,79,74,.5);}

/* ---------- etiquetas, avisos, secciones ---------- */
.badge{font-weight:500; letter-spacing:.02em;}
.flash{border-radius:6px;}
.sec-label{color:#8c3f3b; letter-spacing:.2em;}
html[data-tema="oscuro"] .sec-label{color:#e8958d; border-bottom-color:var(--line);}
.clause-num{background:rgba(169,79,74,.12); color:#161616; border:1px solid rgba(169,79,74,.45);}

/* ---------- el azul y el verde de antes en el tema oscuro ---------- */
html[data-tema="oscuro"] a:not(.btn), html[data-tema="oscuro"] .main a:not(.btn){color:#e8958d;}
html[data-tema="oscuro"] .main a:not(.btn):hover{color:#f4c4bf;}
html[data-tema="oscuro"] :is(a, span, b, strong, small, p)[style*="color:var(--navy"]{color:#e8958d !important;}
html[data-tema="oscuro"] .btn.ghost:hover, html[data-tema="oscuro"] .doc-nav a:hover, html[data-tema="oscuro"] .clause-head:hover{background:#2b2b2b; border-color:#6b6460;}
html[data-tema="oscuro"] code, html[data-tema="oscuro"] pre, html[data-tema="oscuro"] .dist-pista{background:#151515;}
html[data-tema="oscuro"] ::selection{background:rgba(217,122,114,.35);}
html[data-tema="oscuro"] .main a.chip:hover{border-color:#d97a72;}
html[data-tema="oscuro"] .main a.chip.activo{background:#a94f4a; border-color:#d97a72;}
html[data-tema="oscuro"] table.list tr.fila-grupo td{background:#2b2b2b;}
html[data-tema="oscuro"] .clause-head{background:var(--paper);}
html[data-tema="oscuro"] .stat .ic.verde{background:rgba(154,168,154,.18); color:#b4c0b4;}

/* ---------- inicio de sesión ---------- */
.login-wrap{background:var(--paper-dim);}
html[data-tema="oscuro"] .login-wrap{background:#0d0d0d;}
.login-hero, html[data-tema="oscuro"] .login-hero{color:#fff; background:
    radial-gradient(900px 560px at 88% 6%, rgba(169,79,74,.45), transparent 60%),
    radial-gradient(700px 460px at 0% 110%, rgba(125,139,125,.38), transparent 62%),
    linear-gradient(140deg, #161616 0%, #2a302a 62%, #4a574a 100%);}
.login-hero::before{opacity:.4; background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);}
.login-hero img, html[data-tema="oscuro"] .login-hero img{background:none; padding:0; border-radius:0; box-shadow:none; height:150px; width:auto; margin:0 0 28px -6px;}
.login-hero h2{font-size:52px; line-height:1.02; max-width:560px; color:#fff;}
.login-hero h2 span, html[data-tema="oscuro"] .login-hero h2 span{color:#ebe6e1; font-style:italic; text-shadow:none;}
.login-hero p, html[data-tema="oscuro"] .login-hero p{color:#c4bdb6; font-size:16px;}
.login-card, html[data-tema="oscuro"] .login-card{border-radius:10px; box-shadow:none; border-color:var(--line); background:#fff;}
html[data-tema="oscuro"] .login-card{background:var(--paper);}
.login-card h1{font-size:32px;}
.login-card .btn{box-shadow:none;}

/* ---------- restos verdes del tema SG anterior en el tema oscuro ---------- */
html[data-tema="oscuro"] .sidebar nav a.active{background:rgba(255,255,255,.09); color:#fff;}
html[data-tema="oscuro"] .sidebar nav a:hover{background:rgba(255,255,255,.06);}
html[data-tema="oscuro"] .sidebar nav a .ico{color:#9ea89e;}
html[data-tema="oscuro"] .sidebar nav a.active .ico{color:#e08d86;}
html[data-tema="oscuro"] .sidebar .user a, html[data-tema="oscuro"] button.linklike{color:#e9a39c;}
html[data-tema="oscuro"] .login-card p, html[data-tema="oscuro"] .login-links a{color:#a39d97;}
html[data-tema="oscuro"] .sidebar .brand span, html[data-tema="oscuro"] .sidebar .user{color:#9a948e;}

/* ---------- móvil ---------- */
@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr);}      /* sin esto una tabla ancha estiraba la página más que la pantalla del celular */
  .main{min-width:0; max-width:100%; padding:26px 20px 56px;}
  .pagehead h1{font-size:32px;}
  .login-hero h2{font-size:38px;}
  body.nav-open .sidebar{box-shadow:0 0 40px rgba(0,0,0,.3);}
}

/* ---------- azules fijos de la hoja base de .com, cambiados a la paleta ---------- */
html[data-tema="oscuro"] .sidebar nav a{color:#cdc6bf;}
html[data-tema="oscuro"] .sidebar nav a:hover, html[data-tema="oscuro"] .sidebar nav a.active{color:#fff;}
html[data-tema="oscuro"] h1, html[data-tema="oscuro"] h2, html[data-tema="oscuro"] h3, html[data-tema="oscuro"] h4{color:#f6f1ec;}
html[data-tema="oscuro"] .btn.ghost, html[data-tema="oscuro"] .doc-nav a{color:#e6dfd9;}
html[data-tema="oscuro"] .stat .ic{background:rgba(217,122,114,.16); color:#e8958d;}
html[data-tema="oscuro"] table.list th{color:#a39d97; background:transparent;}
html[data-tema="oscuro"] code, html[data-tema="oscuro"] pre{background:#151515; color:#d8d2cc;}
.dist .c1{background:#5f6d5f;} .dist .c2{background:#a3b0a3;} .dist .c3{background:#a94f4a;}
.pwa-btn{color:#161616;} .pwa-btn-ok{background:#a94f4a; border-color:#a94f4a; color:#fff;}