/* sp_styles.css v1.0 inicio */
/* Estilos Generales para sistema de puntos */

:root{
 --primary-color:#007bff;
 --secondary-color:#6c757d;
 --success-color:#28a745;
 --light-bg:#f8f9fa;
 --dark-text:#343a40;
 --light-text:#ffffff;
 --border-color:#dee2e6;
 --shadow:0 4px 8px rgba(0, 0, 0, 0.05);
}

body{
 font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 margin:0;
 background-color:#ffffff;
 color:var(--dark-text);
 line-height:1.0;
}

.container{
 width:90%;
 max-width:1200px;
 margin:0 auto;
 padding:20px 0;
}

/* --- Estilos para el Dispatcher (index.php) --- */
.dispatcher-container{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 min-height:90dvh;
 text-align:center;
 background-color:var(--light-bg);
}

.dispatcher-container h1{
 font-size:2.5rem;
 margin-bottom:1rem;
 color:var(--primary-color);
}

.dispatcher-container p{
 font-size:1.1rem;
 margin-bottom:2.5rem;
 color:var(--secondary-color);
}

.portal-buttons a{
 text-decoration:none;
 color:var(--light-text);
 background-color:var(--primary-color);
 padding:15px 30px;
 border-radius:8px;
 font-size:1.1rem;
 font-weight:500;
 margin:0 10px;
 transition:background-color 0.3s ease, transform 0.2s ease;
 display:inline-block;
}

.portal-buttons a:hover{
 background-color:#0056b3;
 transform:translateY(-2px);
}

.portal-buttons a.admin-btn{
 background-color:var(--secondary-color);
}

.portal-buttons a.admin-btn:hover{
 background-color:#5a6268;
}

/* --- Estilos Compartidos para Cliente y Admin --- */
.main-header{
 background-color:var(--light-bg);
 padding:1rem 0;
 border-bottom:1px solid var(--border-color);
 box-shadow:var(--shadow);
}

.main-header .container{
 display:flex;
 justify-content:space-between;
 align-items:center;
}

.main-header .logo{
 font-size:1.5rem;
 font-weight:bold;
 color:var(--primary-color);
 text-decoration:none;
}

.main-header .back-link{
 font-size:1rem;
 color:var(--secondary-color);
 text-decoration:none;
}

.main-header .back-link:hover{
 text-decoration:underline;
}

/* --- Estilos para la Página de Cliente (puntos_cliente.php) --- */
.hero-section{
 /*background: linear-gradient(30deg, royalblue,#001a33, #003366, #0056b3, #1d4ed8, #001a33);*/
 background: linear-gradient(65deg, #001f3f, #0056b3, #0077b6, #00b4d8, #48cae4, #001f3f);
 color:var(--light-text);
 text-align:center;
 padding:0.5rem 0.5rem;
}

.hero-section h1{
 font-size:3rem;
 margin-bottom:0.5rem;
}

.hero-section p{
 font-size:1.2rem;
 opacity:0.9;
}

.content-section{
 padding:3rem 0;
}

.content-section h2{
 text-align:center;
 font-size:2.2rem;
 margin-bottom:2rem;
}

.gallery{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
 gap:2rem;
}

.gallery-item{
 border:1px solid var(--border-color);
 border-radius:8px;
 overflow:hidden;
 box-shadow:var(--shadow);
 transition:transform 0.3s ease;
}

.gallery-item:hover{
 transform:translateY(-5px);
}

.gallery-item .placeholder-image{
 height:200px;
 background-color:#e9ecef;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:2rem;
 color:var(--secondary-color);
}

.gallery-item-content{
 padding:1.5rem;
}

.gallery-item-content h3{
 margin-top:0;
 font-size:1.3rem;
}

/* --- Estilos para la Página de Admin (puntos_admin.php) --- */
.admin-wrapper{
 display:flex;
}

.admin-menu{
 width:250px;
 background-color:var(--light-bg);
 min-height:calc(100vh - 65px); /* Full height minus header */
 border-right:1px solid var(--border-color);
 padding:2rem 0;
}

.admin-menu h2{
 padding:0 1.5rem 1rem;
 font-size:1.2rem;
 border-bottom:1px solid var(--border-color);
 margin:0 0 1rem 0;
}

.admin-menu ul{
 list-style:none;
 padding:0;
 margin:0;
}

.admin-menu li button{
 display:block;
 width:100%;
 padding:1rem 1.5rem;
 background:none;
 border:none;
 text-align:left;
 font-size:1rem;
 color:var(--dark-text);
 cursor:pointer;
 transition:background-color 0.2s ease;
}

.admin-menu li button:hover, .admin-menu li button.active{
 background-color:#e2e6ea;
 color:var(--primary-color);
}

.admin-content{
 flex-grow:1;
 padding:2rem;
}

.admin-content h1{
 margin-top:0;
}

/* --- Estilos para Tablas y Controles en Admin --- */
.table-controls {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 1rem;
 flex-wrap: wrap;
 gap: 1rem;
}

.search-form {
 display: flex;
 gap: 0.5rem;
 align-items: center;
 flex-wrap: wrap;
}

.search-form input[type="text"] {
 padding: 0.5rem;
 border: 1px solid var(--border-color);
 border-radius: 4px;
 font-size: 1rem;
}

.search-form button {
 padding: 0.5rem 1rem;
 background-color: var(--primary-color);
 color: white;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 font-size: 1rem;
 transition: all 0.2s ease;
 font-weight: 500;
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-form button:hover {
 background-color: #0056b3;
 transform: translateY(-1px);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.search-form button:active {
 transform: translateY(0);
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-form .btn-reset {
 background-color: var(--secondary-color);
}

.search-form .btn-reset:hover {
 background-color: #5a6268;
}

.pagination {
 display: inline-block;
 margin-top: 1rem;
}

.pagination a {
 color: var(--primary-color);
 padding: 8px 12px;
 text-decoration: none;
 border: 1px solid var(--border-color);
 margin: 0 2px;
 border-radius: 4px;
}

.pagination a.active {
 background-color: var(--primary-color);
 color: white;
}

.pagination a:hover:not(.active) {
 background-color: #e9ecef;
}

.dynamic-table {
 width: 100%;
 border-collapse: collapse;
 margin-top: 1rem;
 background-color: white;
 box-shadow: var(--shadow);
 border-radius: 8px;
 overflow: hidden;
}

.dynamic-table th, .dynamic-table td {
 padding: 12px;
 text-align: left;
 border-bottom: 1px solid var(--border-color);
}

.dynamic-table th {
 background-color: var(--light-bg);
 font-weight: 600;
}

.dynamic-table th a {
 text-decoration: none;
 color: var(--dark-text);
 display: flex;
 align-items: center;
 gap: 5px;
}

.dynamic-table th a:hover {
 color: var(--primary-color);
}

.dynamic-table .text-right {
 text-align: right;
}

.btn-action {
 background-color: var(--success-color);
 color: white;
 padding: 5px 10px;
 border-radius: 4px;
 text-decoration: none;
 font-size: 0.9rem;
 transition: all 0.2s ease;
 border: none;
 cursor: pointer;
}

.btn-action:hover {
 opacity: 0.9;
 transform: translateY(-1px);
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-redeem {
 background-color: #ffc107;
 color: #212529;
 padding: 5px 10px;
 border-radius: 4px;
 text-decoration: none;
 font-size: 0.9rem;
 transition: all 0.2s ease;
 border: none;
 cursor: pointer;
 font-weight: 500;
}

.btn-redeem:hover {
 background-color: #e0a800;
 transform: translateY(-1px);
 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sort-indicator {
 font-size: 0.8em;
}

/* --- Media Queries para Responsividad --- */
@media (max-width:768px){
 .admin-wrapper{
  flex-direction:column;
 }
 .admin-menu{
  width:100%;
  min-height:auto;
  border-right:none;
  border-bottom:1px solid var(--border-color);
 }
 .portal-buttons a{
  display:block;
  margin:10px 0;
 }
 
 .table-controls {
  flex-direction: column;
  align-items: stretch;
 }
 
 .search-form {
  flex-direction: column;
  align-items: stretch;
 }
 
 .search-form input[type="text"],
 .search-form button {
  width: 100%;
  margin-bottom: 0.5rem;
 }
 
 .dynamic-table {
  font-size: 0.9rem;
 }
 
 .dynamic-table th, .dynamic-table td {
  padding: 8px;
 }
}

/* --- Media Queries para Responsividad --- */
@media (max-width:768px){
 .admin-wrapper{
  flex-direction:column;
 }
 .admin-menu{
  width:100%;
  min-height:auto;
  border-right:none;
  border-bottom:1px solid var(--border-color);
 }
 .portal-buttons a{
  display:block;
  margin:10px 0;
 }
}

/* sp_styles.css fin */