/* ==========================================================================
   TENNYOU ERP - styles.css
   Nota: Este archivo concentra estilos que se ocupan en Tennyou WEB:
   - login.html
   - home.php
   - clientes.php
   - includes/sidebar.php
   - includes/footer.php
   ========================================================================== */

/* ==========================================================================
   Variables / Tema (Global)
   ========================================================================== */
:root{
  --tennyou-primary: #1578A2;     /* principal */
  --tennyou-primary-dark: #10668a;/* hover */
  --tennyou-danger: #9d2449;      /* botón eliminar */
  --tennyou-danger-dark: #611232; /* hover eliminar */
  --tennyou-footer: #1b789c;      /* footer */
}

/* ==========================================================================
   Global layout (para páginas internas con navbar + sidebar + footer)
   Usado en: home.php, clientes.php
   ========================================================================== */
body.tny-app{
  margin: 0;
  min-height: 100vh;
}

/* Layout de 2 columnas: sidebar + contenido */
body.tny-app .app-shell{
  min-height: 100vh;
  display: flex;
  align-items: stretch; /* para que sidebar y main se estiren igual */
}

/* Columna derecha: navbar + contenido + footer */
body.tny-app .app-main{
  flex: 1 1 auto;
  min-width: 0;            /* CLAVE: evita recortes horizontales */
  display: flex;
  flex-direction: column;
}

/* Área de contenido */
body.tny-app .app-content{
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: 20px;
}

/* ==========================================================================
   Navbar institucional (común)
   Usado en: home.php, clientes.php
   ========================================================================== */
.navbar{
  background-color: var(--tennyou-primary);
  min-height: 56px; /* para que top:56px del sidebar móvil sea consistente */
}

.navbar-brand img{
  height: 50px;
}

.navbar .navbar-text,
.navbar .nav-link,
.navbar .btn{
  color: #fff !important;
}

/* Botón primario para que coincida con tema Tennyou */
.btn-primary{
  background-color: var(--tennyou-primary);
  border-color: var(--tennyou-primary);
}
.btn-primary:hover{
  background-color: var(--tennyou-primary-dark);
  border-color: var(--tennyou-primary-dark);
}

/* ==========================================================================
   Tabs (Dirección / Contacto)
   Usado en: clientes.php
   ========================================================================== */
.nav-tabs .nav-link{
  background-color: var(--tennyou-primary);
  color: #fff;
  border: 1px solid var(--tennyou-primary);
  margin-right: 4px;
}
.nav-tabs .nav-link.active{
  background-color: var(--tennyou-primary-dark);
  color: #fff;
  border-color: var(--tennyou-primary-dark) var(--tennyou-primary-dark) #fff;
}

/* ==========================================================================
   Botón eliminar Tennyou
   Usado en: clientes.php (btnEliminar)
   ========================================================================== */
.btn-eliminar-tennyou{
  background-color: var(--tennyou-danger);
  border-color: var(--tennyou-danger);
  color: #fff;
}
.btn-eliminar-tennyou:hover{
  background-color: var(--tennyou-danger-dark);
  border-color: var(--tennyou-danger-dark);
  color: #fff;
}


/* ==========================================================================
   MODAL "Coincidencias encontradas" (clientes.js)
   Objetivo:
   - Tabla más ligera (menos "grid" técnico)
   - Coherente con UI TennYou (aire, jerarquía, hover sutil)
   - Acciones compactas y secundarias (sin robar foco al nombre)
   --------------------------------------------------------------------------
   Recomendación:
   Encapsulamos estilos al modal para NO afectar otras tablas del sistema.
   ========================================================================== */

#modal_clientes .modal-content{
  border-radius: 12px;          /* Look moderno */
  overflow: hidden;             /* Evita que se vean bordes raros */
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

#modal_clientes .modal-header{
  background: #ffffff;
  border-bottom: 1px solid #e6edf2; /* Separación suave */
  padding: 14px 18px;
}

#modal_clientes .modal-title{
  font-size: 1.15rem;
  font-weight: 700;
  color: #1f2d3d;               /* Gris azulado institucional */
  letter-spacing: .2px;
}

#modal_clientes .btn-close{
  opacity: .65;                 /* Menos agresivo */
}
#modal_clientes .btn-close:hover{
  opacity: 1;
}

#modal_clientes .modal-body{
  padding: 14px 18px 18px;
  background: #ffffff;
}

/* --------------------------------------------------------------------------
   TABLA: base
   - Quitar líneas verticales
   - Mantener separadores horizontales suaves
   - Mejor legibilidad (tamaños y jerarquía)
   -------------------------------------------------------------------------- */

#modal_clientes .table{
  margin-bottom: 0;
  border-color: #eef2f5;
}

#modal_clientes .table thead th{
  background-color: #f5f8fa;    /* Encaja con UI limpia */
  color: #495057;
  font-weight: 700;
  font-size: .92rem;
  border-bottom: 1px solid #dfe7ee;
  padding: 10px 12px;
  vertical-align: middle;
}

/* Quita el "grid" vertical para estilo más moderno */
#modal_clientes .table th,
#modal_clientes .table td{
  border-left: none !important;
  border-right: none !important;
}

/* Filas con aire y lectura rápida */
#modal_clientes .table tbody td{
  padding: 10px 12px;
  vertical-align: middle;
  font-size: .95rem;
  color: #1f2d3d;
  border-bottom: 1px solid #eef2f5;
}

/* Hover sutil para escaneo visual (sin ruido) */
#modal_clientes .table tbody tr:hover{
  background-color: #f8fbfd;
}

/* --------------------------------------------------------------------------
   JERARQUÍA DE CONTENIDO
   - Nombre: protagonista
   - CP/Colonia: secundarios
   -------------------------------------------------------------------------- */

#modal_clientes .table tbody td:nth-child(1){
  font-weight: 600;             /* Nombre ligeramente destacado */
  letter-spacing: .1px;
}

#modal_clientes .table tbody td:nth-child(2),
#modal_clientes .table tbody td:nth-child(3){
  color: #6c757d;
  font-size: .90rem;
}

/* --------------------------------------------------------------------------
   COLUMNA ACCIÓN
   - Compacta
   - Botones sin saturación (blancos, con color en ícono)
   -------------------------------------------------------------------------- */

#modal_clientes .table td:last-child{
  width: 120px;                 /* Evita que “Acción” crezca de más */
  white-space: nowrap;
}

/* Ajuste fino: que los botones se vean como "chips" de acción */
#modal_clientes .btn-outline-tennyou-success,
#modal_clientes .btn-outline-tennyou-danger{
  border-radius: 6px;
  padding: 6px 10px;
  line-height: 1;
}

/* Si quieres un look más "icon-only" (compacto), descomenta:
#modal_clientes .btn-outline-tennyou-success,
#modal_clientes .btn-outline-tennyou-danger{
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
*/

/* --------------------------------------------------------------------------
   BOTONES: estilo limpio (blanco + ícono con color)
   Nota: aquí mantengo tu lógica de colores (verde Bootstrap y vino TennYou).
   -------------------------------------------------------------------------- */

#modal_clientes .btn-outline-tennyou-success{
  background-color: #ffffff;
  border: 1px solid #d1e7dd;
  color: #198754;               /* Verde Bootstrap */
}
#modal_clientes .btn-outline-tennyou-success i{
  color: #198754;
}
#modal_clientes .btn-outline-tennyou-success:hover{
  background-color: #eaf6f0;
  border-color: #198754;
  color: #198754;
}

#modal_clientes .btn-outline-tennyou-danger{
  background-color: #ffffff;
  border: 1px solid #f5c2c7;
  color: #9d2449;               /* Vino TennYou */
}
#modal_clientes .btn-outline-tennyou-danger i{
  color: #9d2449;
}
#modal_clientes .btn-outline-tennyou-danger:hover{
  background-color: #fdecef;
  border-color: #9d2449;
  color: #9d2449;
}

/* --------------------------------------------------------------------------
   RESPONSIVE: en pantallas pequeñas, prioriza lectura
   - reduce padding
   - permite scroll horizontal si es necesario
   -------------------------------------------------------------------------- */

@media (max-width: 576px){
  #modal_clientes .modal-body{
    padding: 12px;
  }
  #modal_clientes .table thead th,
  #modal_clientes .table tbody td{
    padding: 9px 10px;
  }
  #modal_clientes .table-responsive{
    overflow-x: auto;
  }
}



/* ==========================================================================
   Modal coincidencias - Ajustes Mobile
   - Tipografía un poco más pequeña
   - Acciones más compactas
   ========================================================================== */
@media (max-width: 576px){

  #modal_clientes .table thead th{
    font-size: .82rem;
  }

  #modal_clientes .table tbody td{
    font-size: .85rem;
  }

  /* Columna acción más angosta */
  #modal_clientes .table td:last-child{
    width: 92px;
  }

  /* Botones icon-only compactos en móvil */
  #modal_clientes .btn-outline-tennyou-success,
  #modal_clientes .btn-outline-tennyou-danger{
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Opcional: reduce un poco el espacio entre botones */
  #modal_clientes .btn-outline-tennyou-success.me-2{
    margin-right: .35rem !important;
  }
}


/* ==========================================================================
   Botones de acción en modal de coincidencias
   Usado en: clientes.js (botones de acciones)
   ========================================================================= */

.btn-outline-tennyou-success{
  background-color: #ffffff;
  border: 1px solid #d1e7dd;
  color: #198754; /* verde Bootstrap */
}

.btn-outline-tennyou-success i{
  color: #198754;
}

.btn-outline-tennyou-success:hover{
  background-color: #eaf6f0;
  border-color: #198754;
  color: #198754;
}

/* ----------- */

.btn-outline-tennyou-danger{
  background-color: #ffffff;
  border: 1px solid #f5c2c7;
  color: #9d2449; /* vino TennYou */
}

.btn-outline-tennyou-danger i{
  color: #9d2449;
}

.btn-outline-tennyou-danger:hover{
  background-color: #fdecef;
  border-color: #9d2449;
  color: #9d2449;
}


/* ==========================================================================
   HOME (home.php) - Tarjeta y layout
   ========================================================================== */
.home-wrap{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.home-card{
  width: min(980px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  padding: 22px;
}

.logo-wrap{
  display: flex;
  justify-content: center;
  padding: 18px 10px;
}
.logo-wrap img{
  max-width: 520px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.home-grid{
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 991.98px){
  .home-grid{ grid-template-columns: 1fr; }
}

.box{
  border: 1px solid #eef0f3;
  border-radius: 14px;
  padding: 14px;
  background: #fbfbfc;
}
.box h6{
  margin: 0 0 10px;
  font-weight: 700;
}

.muted{ color: #6c757d; }

/* ==========================================================================
   SIDEBAR (includes/sidebar.php)
   ========================================================================== */
.tny-sidebar{
  width: 260px;
  background: var(--tennyou-primary);
  color: #fff;
  transition: width .2s ease;
  overflow-y: auto;
  padding: 12px 10px;
  align-self: stretch;
}

.tny-sidebar.collapsed{ width: 78px; }

.tny-sidebar .sb-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  margin-bottom: 10px;
}

.tny-sidebar .sb-title{
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tny-sidebar.collapsed .sb-title{ display: none; }

.tny-sidebar .sb-toggle{
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: #fff;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

.tny-nav{ list-style: none; margin: 10px 0 0; padding: 0; }

.tny-nav a{
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  margin: 4px 0;
}
.tny-nav a:hover{ background: rgba(255,255,255,0.10); }
.tny-nav a.active{ background: rgba(255,255,255,0.18); }

.tny-nav .ico{ width: 22px; text-align: center; font-size: 16px; }

.tny-nav .lbl{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tny-sidebar.collapsed .lbl{ display: none; }

.tny-sub{
  margin: 0 0 6px 34px;
  padding: 0;
  list-style: none;
}

.tny-sub a{
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  opacity: .95;
}

.tny-sidebar.collapsed .tny-sub{ display: none; }

/* Estado activo botón hamburguesa (sidebar abierto) */
#btnSidebar.active{
  background-color: #fff;
  border-color: #fff;
}
#btnSidebar.active i{
  color: var(--tennyou-primary);
}

/* mobile drawer */
@media (max-width: 991.98px){
  .tny-sidebar{
    position: fixed;
    z-index: 1030;
    left: 0;
    top: 56px;
    bottom: 0;
    height: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    transform: translateX(-105%);
    width: 260px !important;
    transition: transform .25s ease;
  }
  .tny-sidebar.open{ transform: translateX(0); }
}

/* Mobile drawer backdrop */
@media (max-width: 991.98px){
  .sb-backdrop{
    position: fixed;
    inset: 56px 0 0 0; /* deja libre el navbar */
    background: rgba(0,0,0,.35);
    z-index: 1029;
    display: none;
  }
  .sb-backdrop.show{ display:block; }

  /* En móvil, el layout no necesita forzar alturas */
  body.tny-app .app-shell{
    display: block;
    min-height: 100vh;
  }

  /* Ocultar header del sidebar en móvil */
  .tny-sidebar .sb-top{
    display: none;
  }
}

/* ==========================================================================
   FOOTER (includes/footer.php)
   ========================================================================== */
.erp-footer{
  width: 100%;
  background-color: var(--tennyou-footer);
  color: #ffffff;
  font-size: 12px;
  margin-top: auto; /* empuja footer al fondo si el contenido es corto */
  flex: 0 0 auto;
}

.erp-footer-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  text-align: center;
}

.erp-footer-line1{ font-weight: 500; }

.erp-footer-line2{
  font-style: italic;
  opacity: 0.85;
  margin-top: 2px;
}

@media (max-width: 768px){
  .erp-footer{ font-size: 11px; }
}

/* ==========================================================================
   LOGIN (login.php) - Pantalla de acceso
   ========================================================================== */
body.tny-login{
  background-color: #00729c; /* Azul base */
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
}

.tny-login-page{
  min-height: 100vh;
}

.login-card{
  background-color: #ffffff;
  color: #000;
  border-radius: 12px;
  padding: 2rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.logo-box{
  text-align: center;
  margin-bottom: 1rem;
}
.logo-box img{ max-height: 130px; }

.btn-ingresar{
  background-color: #7AC943;
  border: none;
  color: #fff;
  font-weight: bold;
}
.btn-ingresar:hover{ 
	background-color: #5aaa32;
	color: #fff;	
}

.version{
  font-style: italic;
  font-weight: 500;
  color: #00607a;
  text-align: center;
  font-size: 0.9rem;
}

/* Responsive LOGIN */
.tny-login-page{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

@media (max-width: 576px){
  .tny-login-page{
    padding: 16px;
  }

  .login-card{
    max-width: none;        /* quita el límite de 420px */
    width: 100%;
    min-height: 80vh;       /* <-- esto lo hace “alto” en móvil */
    padding: 1.25rem;
    border-radius: 14px;

    display: flex;          /* para distribuir mejor el contenido */
    flex-direction: column;
    justify-content: center;
  }

  .logo-box img{
    max-height: 120px;      /* ajusta según tu logo */
    width: auto;
  }

  /* opcional: controles más “tocables” */
  .login-card input,
  .login-card select,
  .login-card button{
    min-height: 46px;
    font-size: 16px;        /* evita zoom raro en iOS */
  }
}

/* ==========================================================================
   botón CERRAR SESION  (logout.php) - navbar.php
   ========================================================================== */
.btn-logout{
  color: #ffffff;
  border-color: #ffffff;
  transition: all .2s ease-in-out;
}

.btn-logout i{
  transition: color .2s ease-in-out;
}

.navbar .btn-logout:hover,
.navbar .btn-logout:focus{
  background-color: #ffffff;
  color: var(--tennyou-primary) !important;
  border-color: #ffffff;
}

.navbar .btn-logout:hover i,
.navbar .btn-logout:focus i{
  color: var(--tennyou-primary) !important;
}

.navbar .btn-logout:active{
  background-color: #e6e6e6;
  color: #00729c;
}







/* ========================================================================== 
   SWEETALERT - Confirmación acceso correcto
   ========================================================================== */
.swal2-popup.tny-access-ok{
  border-radius: 12px;
  padding-top: 22px;
  padding-bottom: 26px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

.swal2-popup.tny-access-ok .swal2-title{
  color: var(--tennyou-primary); 
  font-weight: 700;
  letter-spacing: .5px;
}

/* Evita que el logo se aplaste */
.swal2-popup.tny-access-ok .swal2-image{
  width: 220px !important;   /* debe coincidir con imageWidth  del swal de home.php*/
  height: auto !important;
  object-fit: contain;
}


.tny-animate-in{
  animation: tnyFadeIn .25s ease-out;
}

@keyframes tnyFadeIn{
  from{
    opacity: 0;
    transform: translateY(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}