/* Revify-like Tailwind-inspired styling for existing Bootstrap-markup templates.
   This keeps templates mostly unchanged while providing a modern dashboard look.
   No Bootstrap CSS is loaded. */

:root{
  --bg: #ffffff;
  --panel: #19816e; /* Cambiado a #19816e para el menú colapsable */
  --panel2:#111c33;
  --border: rgba(148,163,184,.18);
  --muted: #94a3b8;
  --text: #e2e8f0;
  --brand: #7c3aed; /* violet */
  --brand2:#22c55e; /* green accent */
}

html, body { height:100%; }
body{
  margin:0;
  font-family: 'Lato', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial,'Apple Color Emoji', 'Segoe UI Emoji';
  background: #eff2f4; /* Cambiado a #eff2f4 para la columna derecha */
  color: #333; /* Cambiado a color más oscuro para mejor contraste con fondo claro */
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

.container, .container-fluid{
  width:100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Nav superior */
.navbar, .navbar-expand, .navbar-light, .bg-light, header, .header, nav[role="navigation"] {
  background: #19816e !important; /* Fondo blanco para nav superior */
  border-bottom: 1px solid rgba(0,0,0,.1);
}

/* Cards */
.card{
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  overflow: hidden;
  color: #333;
}
.card-header{
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.1);
  background: #f8f9fa;
  font-weight: 600;
  color: #333;
}
.card-body{ padding: 1rem; color: #333; }
.card-footer{
  padding: .9rem 1rem;
  border-top: 1px solid rgba(0,0,0,.1);
  background: #f8f9fa;
  color: #333;
}

/* Alerts / flashes */
.alert{
  border-radius: 14px;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  margin: 0 0 1rem 0;
  color: #333;
}
.alert-success{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color: #0f5132; }
.alert-danger{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #842029; }
.alert-warning{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); color: #664d03; }
.alert-info{ background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.35); color: #055160; }

/* Buttons - Colores Bootstrap clásicos */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .875rem;
  font-weight: 600;
  padding: .55rem .85rem;
  border-radius: 6px; /* Radio más pequeño estilo Bootstrap */
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .02s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active{ transform: translateY(1px); }

/* Botón primario Bootstrap clásico */
.btn-primary{ background: #0d6efd; color: #fff; border-color: #0d6efd; }
.btn-primary:hover{ background: #0b5ed7; border-color: #0a58ca; }

/* Botón secundario Bootstrap clásico */
.btn-outline-secondary{ background: transparent; border-color: #6c757d; color: #6c757d; }
.btn-outline-secondary:hover{ background: #6c757d; color: #fff; }

/* Botón danger Bootstrap clásico */
.btn-danger{ background: #dc3545; color:#fff; border-color: #dc3545; }
.btn-danger:hover{ background: #bb2d3b; border-color: #b02a37; }

.btn-outline-danger{ background: transparent; border-color: #dc3545; color: #dc3545; }
.btn-outline-danger:hover{ background: #dc3545; color: #fff; }

/* Botón success Bootstrap clásico */
.btn-success{ background: #198754; color:#fff; border-color: #198754; }
.btn-success:hover{ background: #157347; border-color: #146c43; }

.btn-sm{ padding:.4rem .65rem; border-radius: 4px; font-size:.8rem; }

/* Forms */
.form-label{ display:block; margin-bottom: .35rem; font-size: .85rem; color: #333; font-weight: 600; }
.form-labeltitulo{ display:block; margin-bottom: .35rem; font-size: 1.05rem; color: #000000; font-weight: 600; }
.form-text{ font-size: .75rem; color: #6c757d; margin-top: .25rem; }
.form-control, .form-select, textarea{
  width: 100%;
  background: #fff;
  border: 1px solid #ced4da;
  color: #212529;
  border-radius: 6px;
  padding: .6rem .75rem;
  outline: none;
}
.form-control:focus, .form-select:focus, textarea:focus{
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}
.form-control::placeholder{ color: #6c757d; }
input[type="datetime-local"]{ color-scheme: light; }

/* Tables */
.table{
  width:100%;
  border-collapse: collapse;
  color: #212529;
  font-family: 'Lato', ui-sans-serif, system-ui, -apple-system,'Segoe UI', Roboto, Helvetica, Arial,'Apple Color Emoji', 'Segoe UI Emoji';
  font-size: .8rem;
}
.table th, .table td{
  padding: .65rem .65rem;
  border-bottom: 1px solid #dee2e6;
  vertical-align: middle;
}
.table thead th{
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #000000;
  background: #d9d9d9;
  
}
.table tbody tr:hover{ background: rgba(0,0,0,.05); }
.table-sm th, .table-sm td{ padding: .45rem .55rem; }

/* Small utilities used in templates */
.text-muted{ color: #6c757d !important; }
.mb-0{ margin-bottom:0 !important; }
.mb-2{ margin-bottom:.5rem !important; }
.mb-3{ margin-bottom:.75rem !important; }
.mb-4{ margin-bottom:1rem !important; }
.mt-2{ margin-top:.5rem !important; }
.mt-3{ margin-top:.75rem !important; }
.mt-4{ margin-top:1rem !important; }
.me-2{ margin-right:.5rem !important; }
.gap-2{ gap:.5rem !important; }
.d-flex{ display:flex !important; }
.align-items-end{ align-items:flex-end !important; }
.align-items-center{ align-items:center !important; }
.justify-content-between{ justify-content:space-between !important; }
.flex-wrap{ flex-wrap:wrap !important; }

/* "Row/col" minimal responsive grid */
.row{ display:flex; flex-wrap:wrap; margin-left:-.5rem; margin-right:-.5rem; }
.row > *{ padding-left:.5rem; padding-right:.5rem; width:100%; }
.row1{ display:flex; flex-wrap:wrap; margin-left:-.5rem; margin-right:-.5rem; }
.row1 > *{ padding-left:.5rem; padding-right:.5rem; width:50%; }
.col-122{ width:100%; }
.col-12{ width:50%; }
.col-md-2, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-12{ width:100%; }
.col-md-3 {width: 100%;        /* 3 columnas de 12 */
  font-weight: bold;}


@media (min-width: 768px){
  .col-md-2{ width: 16.6667%; }
  .col-md-3{ width: 25%; }
  .col-md-4{ width: 33.3333%; }
  .col-md-5{ width: 41.6667%; }
  .col-md-6{ width: 50%; }
  .col-md-7{ width: 58.3333%; }
  .col-md-8{ width: 66.6667%; }
  .col-md-9{ width: 75%; }
  .col-md-10{ width: 83.3333%; }
  .col-md-12{ width: 100%; }
}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  padding:.25rem .5rem;
  border-radius: 6px;
  font-size: .75rem;
  border:1px solid transparent;
  background: #6c757d;
  color: #fff;
}
.badge.bg-success{ background: #198754; }
.badge.bg-danger{ background: #dc3545; }
.badge.bg-warning{ background: #ffc107; color: #000; }

/* Inputs in tables */
.table input.form-control{ padding: .45rem .6rem; border-radius: 4px; }

/* Scrollbars */
*::-webkit-scrollbar{ width: 10px; height:10px; }
*::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.2); border-radius: 999px; }
*::-webkit-scrollbar-track{ background: rgba(0,0,0,.05); }

/* Estilos específicos para sidebar/menú colapsable */
.sidebar, .offcanvas, .collapse, .navbar-collapse, aside, .aside, [class*="sidebar"] {
  background: #19816e !important; /* Fondo #19816e para menú colapsable */
  color: #fff;
}

/* Estilos para elementos dentro del sidebar */
.sidebar a, .offcanvas a, .collapse a, .navbar-collapse a, aside a, .aside a, [class*="sidebar"] a {
  color: rgba(255,255,255,.9) !important;
}

.sidebar a:hover, .offcanvas a:hover, .collapse a:hover, .navbar-collapse a:hover, aside a:hover, .aside a:hover, [class*="sidebar"] a:hover {
  color: #fff !important;
  background: rgba(255,255,255,.1);
}

/* Área de contenido principal */
.main-content, .content, main, .container, .container-fluid {
  background: #eff2f4; /* Fondo #eff2f4 para columna derecha */
}