/* Estilos base */
    *{box-sizing:border-box;}
    body{
        font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin:0;padding:0;
        background:#f5f7fa;color:#333;
        -webkit-font-smoothing:antialiased;
        -moz-osx-font-smoothing:grayscale;
    }
    header{
        background:#1D5200;color:#fff;
        padding:1rem 2rem;
        display:flex;justify-content:space-between;align-items:center;
        box-shadow:0 2px 10px rgb(0 0 0 / 0.15);
    }
    header h1{font-weight:700;font-size:1.5rem;}
    header .user-info{font-size:0.9rem;}
    nav{
        background:#308601;
        display:flex;
        padding:0.2rem 0;
        box-shadow:inset 0 -2px 0 #004d40;
        flex-wrap:wrap;
    }
    nav button{
        background:transparent;
        border:none;
        color:#b2dfdb;
        font-weight:600;
        padding:1rem 1.5rem;
        cursor:pointer;
        transition:background-color 0.3s ease,color 0.3s ease;
        font-size:1rem;
        flex-grow:1;
        text-align:center;
        min-width: 120px;
    }
    nav button:hover,nav button.active{
        background:#1D5200;color:#fff;
    }
    main{
        padding:1rem 2rem 3rem;
        min-height:75vh;
        background:white;
        margin:1rem auto 2rem;
        max-width:1000px;
        border-radius:8px;
        box-shadow:0 6px 12px rgb(0 0 0 / 0.1);
    }
    .hidden{display:none;}
    section h2{
        color:#1D5200;
        margin-top:0;
        font-weight:700;
        border-bottom:3px solid #1D5200;
        padding-bottom:0.3rem;
    }
    label{
        display:block;
        margin-top:0.8rem;
        font-weight:600;
        color:#1D5200;
    }
    input[type="text"],input[type="number"],input[type="date"],select,textarea{
        width:100%;
        padding:0.45rem 0.6rem;
        margin-top:0.3rem;
        border-radius:4px;
        border:1.8px solid #b2dfdb;
        font-size:1rem;
        transition:border-color 0.3s ease;
        font-family:inherit;
    }
    input[type="text"]:focus,input[type="number"]:focus,input[type="date"]:focus,select:focus,textarea:focus{
        outline:none;
        border-color:#1D5200;
        box-shadow:0 0 8px #1D5200;
    }
    button.primary-btn{
        margin-top:1rem;
        background:#1D5200;
        color:white;
        border:none;
        padding:0.75rem 1.5rem;
        border-radius:6px;
        cursor:pointer;
        font-weight:700;
        font-size:1rem;
        transition:background-color 0.3s ease;
    }
    button.primary-btn:hover{
        background:#145000;
    }
    table{
        border-collapse:collapse;
        width:100%;
        margin-top:1rem;
        font-size:0.9rem;
    }
    th,td{
        border:1px solid #b2dfdb;
        padding:0.5rem 0.7rem;
        text-align:left;
        vertical-align:middle;
    }
    th{
        background:#1D5200;
        color:white;
        font-weight:700;
    }
    .status-badge{
        display:inline-block;
        padding:0.3rem 0.6rem;
        border-radius:12px;
        font-weight:600;
        font-size:0.85rem;
        color:white;
    }
    .status-maduracion{background-color:#4caf50;}
    .status-venta{background-color:#ff9800;}
    .status-stock-bajo{background-color:#f44336;}
    .alert{
        background-color:#ffccbc;
        border-left:5px solid #f44336;
        padding:0.5rem 1rem;
        margin:0.5rem 0 1rem;
        border-radius:4px;
        font-weight:600;
        color:#a94442;
    }
    .table-wrapper{
        overflow-x:auto;
        margin-top:1rem;
    }
    /* MODIFICADO: Modal de Login mejorado */
    #login-modal{
        position:fixed;
        top:0;left:0;right:0;bottom:0;
        background:rgba(0,0,0,0.75);
        display:flex;
        justify-content:center;
        align-items:center;
        z-index:1000;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        transition: opacity 0.3s ease;
    }
    #login-modal .log-container{
        background: linear-gradient(135deg, #1D5200, #308601);
        padding: 2.5rem 3rem;
        border-radius: 12px;
        max-width: 360px;
        width: 90%;
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5);
        color: #e0e0e0;
        text-align: center;
    }
    #login-modal h3{
        margin-bottom: 1.5rem;
        font-weight: 700;
        color: #f1f8e9;
        font-size: 1.8rem;
        text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    }
    #login-modal input[type="text"],
    #login-modal input[type="password"]{
        margin: 0.8rem 0;
        width: 100%;
        padding: 0.6rem 0.8rem;
        border-radius: 6px;
        border: none;
        font-size: 1rem;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
        transition: box-shadow 0.3s ease;
        font-family: inherit;
    }
    #login-modal input[type="text"]:focus,
    #login-modal input[type="password"]:focus{
        outline: none;
        box-shadow: 0 0 8px #aeea00;
        background-color: #f9fbe7;
        color: #333;
    }
    #login-modal button{
        margin-top: 1.2rem;
        background: #aeea00;
        border: none;
        color: #1D5200;
        padding: 0.75rem 1.8rem;
        font-weight: 700;
        font-size: 1rem;
        border-radius: 8px;
        cursor: pointer;
        box-shadow: 0 5px 10px rgba(174, 234, 0, 0.6);
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    #login-modal button:hover{
        background: #8bc34a;
        color: #fff;
    }
    #login-error{
        color: #ffeb3b;
        margin-top: 0.6rem;
        font-weight: 700;
        font-size: 0.9rem;
        min-height: 1.2em;
        text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    }
    .hidden {
  display: none;
}

    @media (max-width: 600px) {
        main {
            padding: 1rem;
            margin: 0.5rem;
        }
        nav button {
            font-size: 0.9rem;
            padding: 0.7rem 0.7rem;
        }
        header h1 {
            font-size: 1.2rem;
        }
        #login-modal .log-container {
            padding: 1.5rem 2rem;
        }
        #login-modal h3 {
            font-size: 1.4rem;
            margin-bottom: 1rem;
        }
    }
    /* Conteo regresivo estilo */
    #conteo-gestacion {
        margin-top: 1rem;
        font-size: 1.1rem;
        font-weight: 700;
        color: #1D5200;
        user-select: none;
    }
    .botones-informes,
.enlaces-pdf {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.botones-informes .primary-btn,
.enlaces-pdf .primary-btn {
    flex: 1 1 260px;
    text-align: center;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    background-color: #144c0c;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.botones-informes .primary-btn:hover,
.enlaces-pdf .primary-btn:hover {
    background-color: #0f3809;
    text-decoration: none;
}
.menu-link {
  padding: 10px 15px;
  color: white;
  text-decoration: none;
  background-color: green;
}

.menu-link.activo {
  background-color: #b30000; /* Rojo o el que prefieras */
  font-weight: bold;
  border-bottom: 3px solid yellow;
}
button {
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary-btn {
  background-color: #1b5e20;
  color: #fff;
  font-weight: bold;
  transition: background 0.3s ease;
}

.primary-btn:hover {
  background-color: #2e7d32;
}

.btn-guardar {
  background-color: #0277bd;
  color: white;
  margin-right: 5px;
}

.btn-editar {
  background-color: #f9a825;
  color: white;
  margin-right: 5px;
}

.btn-eliminar {
  background-color: #c62828;
  color: white;
}
#nav-tabs button.active {
  background-color: #004d00;
  color: white;
  font-weight: bold;
  border-bottom: 3px solid #ffffff;
}
.logo-img {
  height: 40px;
  width: auto;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #2c5f2d;
  padding: 8px 15px;
  border-radius: 8px;
  color: white;
  border: 1px solid #4a944a;
}

.user-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

.user-text {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.rol-badge {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 5px;
  margin-top: 2px;
  font-weight: bold;
  width: fit-content;
}
  /* Botón cambiar contraseña */
  .btn-password {
    background-color: #ffd000;
    border: none;
    color: #333;
    padding: 5px 10px;
    margin-right: 5px;
    border-radius: 4px;
    cursor: pointer;
  }

  .btn-password:hover {
    background-color: #ffca00;
  }
/* Estilo para la etiqueta */
label[for="usuario-pass"] {
  font-weight: bold;
  color: #c09700; /* amarillo oscuro */
  margin-top: 10px;
  display: block;
}

/* Estilo para el input de contraseña */
#usuario-pass {
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  margin-bottom: 12px;
  border: 1px solid #1D5200;
  border-radius: 5px;
  background-color: #fffbea;
  color: #333;
  box-shadow: 0 0 4px #1D5200(255, 204, 0, 0.3);
  transition: border 0.2s, box-shadow 0.2s;
}

/* Efecto al enfocar */
#usuario-pass:focus {
  border-color: #e6b800;
  outline: none;
  box-shadow: 0 0 6px rgba(255, 204, 0, 0.6);
}