/* === PTS-AI Industrial UI v3 === */

/* ---------- Variables de color ---------- */
:root {
 --bg:#e8e9eb;
 --text:#1c1f22;
 --card:#ffffff;
 --border:#ccc;
 --accent:#ffd84a;
 --accent-dark:#f2c300;
 --ok:#009e3e;
 --no:#d93025;
 --shadow:rgba(0,0,0,0.1);
}
body.dark {
 --bg:#1c1f22;
 --text:#f3f3f3;
 --card:#2a2b2d;
 --border:#3d3d3d;
 --accent:#f2c300;
 --accent-dark:#d4aa00;
 --shadow:rgba(0,0,0,0.4);
}

/* ---------- Base ---------- */
body {
 margin:0;
 font-family:"Inter",system-ui,sans-serif;
 background:var(--bg);
 color:var(--text);
 transition:.3s background,.3s color;
}
h1,h2,h3{margin:0;font-weight:600;}
a{text-decoration:none;color:var(--accent-dark);}
a:hover{text-decoration:underline;}
table{width:100%;border-collapse:collapse;font-size:.95em;}
th,td{padding:10px 12px;border-bottom:1px solid var(--border);}
thead tr{background:var(--accent-dark);color:#fff;}
tr:hover td{background:rgba(0,0,0,0.05);}
.status{
 padding:4px 8px;border-radius:5px;font-weight:600;
 text-transform:capitalize;
}
.status.pendiente{background:var(--accent-dark);color:#000;}
.status.aprobado{background:var(--ok);color:#fff;}
.status.rechazado{background:var(--no);color:#fff;}

/* ---------- Topbar ---------- */
.topbar{
 background:var(--card);
 color:var(--text);
 border-bottom:2px solid var(--accent-dark);
 padding:12px 16px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 position:sticky;top:0;z-index:10;
 box-shadow:0 2px 5px var(--shadow);
}
#themeToggle{
 width:28px;height:28px;
 border:none;border-radius:50%;
 background:var(--accent-dark);
 cursor:pointer;
}

/* ---------- Layout principal ---------- */
.content{padding:20px;margin-bottom:60px;}
.table-card,.card,.perfil-card{
 background:var(--card);
 border:1px solid var(--border);
 border-radius:12px;
 box-shadow:0 3px 8px var(--shadow);
 padding:18px;margin-top:15px;
}
.stats-cards{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
 gap:10px;
}
.stat-card{
 background:var(--card);
 border:1px solid var(--border);
 border-left:6px solid var(--accent-dark);
 border-radius:10px;
 padding:12px;
 text-align:center;
 box-shadow:0 2px 6px var(--shadow);
}
.stat-card h3{color:var(--accent-dark);font-size:1.05em;margin-bottom:4px;}
.stat-card span{font-size:22px;font-weight:700;}

/* ---------- Chat ---------- */
.chat-box{
 background:var(--card);
 border-radius:10px;
 box-shadow:0 3px 8px var(--shadow);
 padding:15px;
 height:65vh;
 overflow-y:auto;
}
.chat-msg{
 margin:10px 0;
 padding:10px 14px;
 border-radius:8px;
 max-width:85%;
 line-height:1.4em;
}
.chat-msg.ia{
 background:rgba( var(--accent-dark),0.15 );
 border-left:4px solid var(--accent-dark);
}
.chat-msg.user{
 background:rgba(0,0,0,0.08);
 margin-left:auto;
}
.chat-input{
 display:flex;
 margin-top:10px;
}
.chat-input input{
 flex:1;padding:12px;
 border:1px solid var(--border);
 border-radius:8px 0 0 8px;
}
.chat-input button{
 background:var(--accent-dark);
 color:#000;
 font-weight:600;
 border:none;
 border-radius:0 8px 8px 0;
 padding:0 20px;
 cursor:pointer;
}

/* ---------- Barra inferior ---------- */
.bottom-nav{
 position:fixed;
 bottom:0;left:0;width:100%;
 background:var(--card);
 border-top:2px solid var(--accent-dark);
 display:flex;
 justify-content:space-around;
 padding:6px 0;
 z-index:20;
}
.bottom-nav .tab{
 flex:1;
 text-align:center;
 padding:10px 0;
 background:none;
 border:none;
 color:var(--text);
 font-weight:600;
 cursor:pointer;
 transition:.2s;
}
.bottom-nav .tab.active{
 color:#000;
 background:var(--accent);
 border-radius:6px;
}

/* ---------- Perfil ---------- */
.perfil-card input[type="text"],
.perfil-card input[type="email"]{
 width:100%;padding:10px 12px;
 border:1px solid var(--border);
 border-radius:8px;margin-bottom:10px;
}
.btn-save{
 background:var(--accent-dark);
 color:#000;
 border:none;
 border-radius:8px;
 padding:10px 14px;
 font-weight:600;
 cursor:pointer;
 width:100%;
}
.logo-upload{text-align:center;margin-bottom:15px;}
.logo-upload img{
 width:100px;height:100px;
 object-fit:contain;
 border:2px dashed var(--border);
 border-radius:8px;
 margin-bottom:10px;
}

/* ---------- Login ---------- */
.login-body{
 background:linear-gradient(135deg,#1c1f22 0%,#f2c300 100%);
 display:flex;justify-content:center;align-items:center;
 height:100vh;
}
.login-card{
 background:#fff;color:#111;
 border-radius:14px;padding:28px;
 box-shadow:0 8px 18px var(--shadow);
 width:90%;max-width:380px;text-align:center;
}
.login-card h1{color:#f2c300;margin-bottom:5px;}
.subtitle{color:#444;font-size:.9em;margin-bottom:20px;}
.login-card input{
 width:100%;padding:10px;margin:6px 0;
 border:1px solid #ccc;border-radius:8px;
}
.btn-login{
 width:100%;padding:10px;
 background:#f2c300;color:#000;
 border:none;border-radius:8px;
 font-weight:700;cursor:pointer;
}
.btn-login:hover{background:#ffd84a;}
.btn-guest{
 width:100%;padding:10px;margin-top:6px;
 background:#e8e9eb;border:none;border-radius:8px;
 cursor:pointer;
}
.btn-guest:hover{background:#d7d7d7;}
.msg{color:#d93025;font-size:.9em;margin-top:4px;}

/* ---------- Responsive ---------- */
@media (min-width:768px){
 .bottom-nav{
   flex-direction:column;
   width:70px;
   height:100%;
   top:0;left:0;bottom:0;
   border-top:none;border-right:2px solid var(--accent-dark);
 }
 .bottom-nav .tab{padding:16px 0;font-size:.9em;}
 .content{margin-left:80px;margin-bottom:0;}
}