body{
  background-image: url('img/logo.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding-bottom: 150px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: right;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}

input[type=text], input[type=tel], input[type=email], input[type=password], select, textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit], input[type=reset] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit],input[type=reset]:hover {
  background-color: #45a049;
}

#formulario {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width: 50%;
  position: relative;
  left: 25%;
  opacity: 0.8;
}

.popup {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 1000;
}
.overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 999;
}
.close-btn {
  cursor: pointer;
  font-size: 20px;
  float: right;
  z-index: 1001;
}

.servicios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.servicio {
  background: #f9f9f9;
  border-left: 4px solid #4CAF50;
  padding: 15px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.servicio:hover {
  transform: scale(1.02);
}

.servicio h3 {
  margin: 0 0 5px;
  color: #4CAF50;
  font-size: 18px;
}

.servicio p {
  margin: 0;
  color: #444;
  font-size: 14px;
}

.presentacion {
  background-color: #ffffff;
  padding: 40px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
  max-width: 900px;
  margin: 40px auto;
  color: #333;
}

.presentacion h2 {
  color: #4CAF50;
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
}

.presentacion p {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.presentacion strong {
  color: #4CAF50;
}

.presentacion em {
  font-style: normal;
  color: #0077cc;
}

.contacto-presentacion {
  background-color: #f2f2f2;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  margin-top: 30px;
}

.contacto-presentacion h3 {
  color: #4CAF50;
  margin-bottom: 10px;
  font-size: 20px;
}

.contacto-presentacion p {
  margin: 6px 0;
  font-size: 15px;
}

.contacto-presentacion a {
  color: #0077cc;
  text-decoration: none;
}

.contacto-presentacion a:hover {
  text-decoration: underline;
}


.footer-contacto {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 15px 20px;
  font-family: Arial, sans-serif;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.2);
  z-index: 999;
}

.footer-contacto .contacto {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-contacto h3 {
  color: #4CAF50;
  margin-bottom: 8px;
  font-size: 16px;
}

.footer-contacto p {
  margin: 4px 0;
  font-size: 14px;
}

.footer-contacto a {
  color: #4CAF50;
  text-decoration: none;
}

.footer-contacto a:hover {
  text-decoration: underline;
}

table {
      width: 80%;
      margin: auto;
      border-collapse: collapse;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      background-color: #fff;
    }

    th, td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    th {
      background-color: #0078D7;
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    tr:hover {
      background-color: #f1f1f1;
    }

    .add {
      background-color: #003366; /* Azul oscuro */
      color: #fff;
      font-size: 25;
    }

    .add:hover {
      background-color: #e0e0e0; /* Gris claro */
      color: #003366; /* Mantiene contraste con el fondo */
    }

    .acciones {
      display: flex;
      gap: 20px;
      justify-content: center;
      margin-top: 30px;
    }

    .btn-accion {
      text-decoration: none;
      padding: 14px 28px;
      border-radius: 40px;
      font-size: 16px;
      font-weight: 600;
      color: white;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 6px 14px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      border: 2px solid transparent;
    }

    .btn-accion i {
      font-size: 18px;
    }

    /* Estilo para Aprobar */
    .aprobar {
      background: linear-gradient(135deg, #43e97b, #38f9d7);
      border-color: #38f9d7;
    }

    .aprobar:hover {
      background: linear-gradient(135deg, #2ecc71, #1abc9c);
      transform: scale(1.05);
    }

    /* Estilo para Rechazar */
    .rechazar {
      background: linear-gradient(135deg, #ff6a6a, #ff4e50);
      border-color: #ff4e50;
    }

    .rechazar:hover {
      background: linear-gradient(135deg, #e74c3c, #c0392b);
      transform: scale(1.05);
    }

    .btn-accion {
      text-decoration: none;
      padding: 10px 20px;
      border-radius: 40px;
      font-size: 15px;
      font-weight: 600;
      color: white;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-right: 10px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    .btn-accion i {
      font-size: 16px;
    }

    /* Editar: azul vibrante */
    .editar {
      background: linear-gradient(135deg, #2196F3, #21CBF3);
    }

    .editar:hover {
      background: linear-gradient(135deg, #1976D2, #1E88E5);
      transform: scale(1.05);
    }

    /* Eliminar: rojo intenso */
    .eliminar {
      background: linear-gradient(135deg, #f44336, #e57373);
    }

    .eliminar:hover {
      background: linear-gradient(135deg, #d32f2f, #c62828);
      transform: scale(1.05);
    }

    .btn-accion {
      text-decoration: none;
      padding: 14px 28px;
      border-radius: 40px;
      font-size: 16px;
      font-weight: 600;
      color: white;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 6px 14px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
      border: 2px solid transparent;
    }

    .btn-accion i {
      font-size: 18px;
    }

    /* Estilo para Añadir Servicio */
    .añadir {
      background: linear-gradient(135deg, #00c6ff, #0072ff);
      border-color: #0072ff;
    }

    .añadir:hover {
      background: linear-gradient(135deg, #0072ff, #0052cc);
      transform: scale(1.05);
    }

    #filtroTabla {
      width: 100%;
      max-width: 400px;
      padding: 10px 14px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 6px;
      margin: 20px auto;
      display: block;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    #filtroTabla:focus {
      border-color: #0072ff;
      box-shadow: 0 0 8px rgba(0,114,255,0.3);
      outline: none;
    }

    .archivo-bonito {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background-color: #eef3f8;
  color: #0072ff;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border-radius: 6px;
  border: 1px solid #cdd9e5;
  transition: all 0.3s ease;
}

.archivo-bonito:hover {
  background-color: #dbe7f5;
  color: #0056b3;
  border-color: #b0c4de;
}

.archivo-bonito i {
  font-size: 16px;
}

#filtroEstado {
  margin-bottom: 15px;
}

/* Botón base */
.btn-accion.filtro {
  color: white;
  padding: 6px 12px;
  margin: 2px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Botón "Todos" - gris oscuro */
.btn-accion.filtro[data-estado="todos"] {
  background-color: #343a40;
}
.btn-accion.filtro[data-estado="todos"]:hover {
  background-color: #23272b;
}

/* Botón "Pendiente" - amarillo oscuro */
.btn-accion.filtro[data-estado="Pendiente"] {
  background-color: #f0ad4e;
}
.btn-accion.filtro[data-estado="Pendiente"]:hover {
  background-color: #ec971f;
}

/* Botón "Aprobado" - verde */
.btn-accion.filtro[data-estado="Aprobado"] {
  background-color: #5cb85c;
}
.btn-accion.filtro[data-estado="Aprobado"]:hover {
  background-color: #4cae4c;
}

/* Botón "Rechazado" - rojo */
.btn-accion.filtro[data-estado="Rechazado"] {
  background-color: #d9534f;
}
.btn-accion.filtro[data-estado="Rechazado"]:hover {
  background-color: #c9302c;
}