/* lubricentro.css - estilo consistente con Clientes (gris claro, bordes rojos, texto negro) */
:root{
  --bg:#f2f3f5;
  --panel:#ffffff;
  --accent:#c62828; /* rojo fuerte */
  --muted:#ececec;
  --text:#111;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* Layout */
.app {
  display:flex;
  min-height:100vh;
}

a {
  text-decoration: none;
}



/* Sidebar (menú estilo foto) */
.sidebar{
  width:220px;
  background:var(--muted);
  padding:18px;
  border-right:3px solid var(--accent);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.brand{
  font-weight:800;
  color:var(--text);
  font-size:18px;
  margin-bottom:6px;
}
.menu-item{
  background:transparent;
  border:2px solid var(--accent);
  padding:12px;
  text-align:center;
  font-weight:800;
  color:var(--text);
  text-decoration:none;
  border-radius:8px;
  display:block;
}
.menu-item:hover{
  background:var(--accent);
  color:#fff;
  transition:0.15s;
}
.menu-item.active{
  background:var(--accent);
  color:#fff;
}

/* Main */
.main {
  flex:1;
  padding:28px;
}
.card{
  background:var(--panel);
  border-radius:10px;
  padding:18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  border:2px solid rgba(0,0,0,0.03);
}

/* Header top */
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:14px;
}
.header-top h1{
  font-size:20px;
  margin:0;
  font-weight:900;
}

/* Select & Add button */
.selector {
  padding:8px 10px;
  border-radius:8px;
  border:2px solid #ddd;
  margin-right:8px;
  font-weight:800;
}
.btn-add {
  background: #fff;
  border:2px solid var(--accent);
  color:var(--text);
  padding:8px 14px;
  font-weight:800;
  border-radius:8px;
  text-decoration:none;
}
.btn-add:hover{ background:var(--accent); color:#fff; }

/* Table */
.table-wrap{ overflow-x:auto; }
table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}
thead th{
  background:var(--accent);
  color:#fff;
  font-weight:800;
  padding:12px;
  text-align:left;
}
tbody td{
  padding:12px;
  border-bottom:1px solid #eee;
}
tr:hover td{ background:#fafafa; }

/* Buttons action */
.action-btn{
  padding:6px 10px;
  border-radius:6px;
  font-weight:800;
  text-decoration:none;
  margin-right:6px;
}
.edit-btn{
  background:#fff;
  border:2px solid #f0ad4e;
  color:#111;
}
.delete-btn{
  background:#fff;
  border:2px solid var(--accent);
  color:var(--accent);
}
.edit-btn:hover{ background:#f0ad4e; color:#fff; }
.delete-btn:hover{ background:var(--accent); color:#fff; }

/* Form styles in modal */
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.form-row-full{ grid-column:1 / -1; }
label{ display:block; font-weight:700; margin-bottom:6px; }
input[type="text"], input[type="email"], input[type="number"], textarea{
  width:100%;
  padding:10px;
  border:2px solid #ddd;
  border-radius:8px;
  font-size:14px;
}

/* Primary / secondary buttons */
.btn-primary{
  margin-top:12px;
  padding:10px 14px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:8px;
  font-weight:800;
  cursor:pointer;
}
.btn-secondary{
  margin-left:10px;
  padding:10px 14px;
  background:#fff;
  border:2px solid #bbb;
  color:#111;
  border-radius:8px;
  font-weight:800;
}

/* modal */
.modal {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
}
.modal-contenido{
  background:var(--panel);
  padding:18px;
  border-radius:8px;
  width:720px;
  max-width:95%;
}
.cerrar{
  float:right;
  cursor:pointer;
  font-size:20px;
}

/* ================================
   USUARIOS — MODERNO Y CONSISTENTE
=================================== */

.usuarios-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.titulo-centro {
    margin: 0;
    font-size: 28px;
    font-weight: 900;
}

/* Flecha azul */
.btn-blue {
    background: #fff;
    border: 2px solid #1976ff;
    padding: 8px 18px;
    border-radius: 10px;
    font-weight: 800;
    color: #1976ff;
}
.btn-blue:hover {
    background: #1976ff;
    color: white;
}

/* Tabla moderna */
.styled-table thead th {
    background: #1976ff !important;
    color: #fff;
    padding: 12px;
    font-weight: 800;
}

.styled-table td {
    font-size: 14px;
    padding: 12px;
}

/* links hash */
.hash-link {
    color: #1976ff;
    margin-left: 6px;
    font-weight: bold;
    cursor: pointer;
}
.hash-link:hover {
    text-decoration: underline;
}

/* badges activo */
.badge {
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 700;
    color: #fff;
}
.badge.active {
    background: #4caf50;
}
.badge.inactive {
    background: #c62828;
}

/* Botones editar / eliminar */
.edit-btn {
    border: 2px solid #ff9800;
    color: #ff9800;
    background: #fff;
}
.edit-btn:hover {
    background: #ff9800;
    color: white;
}

.delete-btn {
    border: 2px solid #c62828;
    color: #c62828;
    background: #fff;
}
.delete-btn:hover {
    background: #c62828;
    color: white;
}

/* Modal */
.modal-contenido {
    border-radius: 16px !important;
}


/* helpers */
.oculto{ display:none; }

@media (max-width:900px){
  .form-grid{ grid-template-columns:1fr; }
  .sidebar{ display:none; }
}