/* ======= BASE ======= */

      body {
          font-family: 'Roboto', sans-serif;
          margin: 1rem;
      }

      .icon {
          width: 16px;
          height: 16px;
          vertical-align: middle;
          margin-right: 6px;
          stroke: currentColor;
      }

      /* ======= ENCABEZADO ======= */
      .encabezado-consultorio {
          padding-bottom: 1.5rem;
          border-bottom: 1px solid #ccc;
          margin-bottom: 2rem;
      }

      .encabezado-top {
          display: flex;
          align-items: center;
          gap: 1rem;
          margin-bottom: 1rem;
      }

      .encabezado-top .logo {
          width: 50px;
          height: auto;
      }

      .encabezado-top .titulo h1 {
          margin: 0;
          font-size: 1.5rem;
          font-weight: 600;
          color: #333;
      }

      .encabezado-top .titulo .fecha {
          margin: 0;
          font-size: 0.95rem;
          color: #666;
      }

      /* ======= FORMULARIO ======= */
      .form-fecha {
          display: flex;
          flex-wrap: wrap;
          gap: 1.2rem;
          align-items: center;
          margin-bottom: 1rem;
      }

      .form-grupo {
          display: flex;
          flex-wrap: wrap;
          gap: 0.6rem;
          align-items: center;
      }

      .form-fecha label {
          font-size: 13px;
          color: #333;
      }

      .form-fecha input {
          padding: 0.4rem 0.6rem;
          font-size: 13px;
          border: 1px solid #ccc;
          border-radius: 8px;
          background-color: #fff;
          box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
          transition: border-color 0.3s ease;
      }

      .form-fecha input:focus {
          border-color: #009688;
          outline: none;
      }

      .form-fecha button {
          padding: 0.45rem 1rem;
          font-size: 13px;
          background-color: #00bcd4;
          color: #fff;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          transition: background-color 0.3s ease;
      }

      .form-fecha button:hover {
          background-color: #058e9f;
      }

      /* ======= LEYENDA ======= */
      .leyenda {
          display: flex;
          gap: 1rem;
          flex-wrap: wrap;
          font-size: 13px;
          color: #444;
      }

      .leyenda .cuadro {
          display: inline-block;
          width: 18px;
          height: 18px;
          border-radius: 4px;
          margin-right: 0.3rem;
      }

      .leyenda .verde {
          background-color: #4CAF50;
      }

      .leyenda .amarillo {
          background-color: #FF9800;
      }

      .leyenda .rojo {
          background-color: #F44336;
      }

      .leyenda .blue {
          background-color: #2196F3;
      }

      /* ======= GRID & GRUPO ======= */
      .grid {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 1rem;
      }

      .grupo-turno {
          margin-top: 2rem;
          padding: 1rem;
          background-color: #f8f9fa;
          border: 1px solid #dee2e6;
          border-radius: 12px;
      }

      .grupo-turno h3 {
          margin-bottom: 1rem;
          font-size: 16px;
          color: #103d2a;
          border-bottom: 2px solid #103d2a;
          padding-bottom: 0.4rem;
      }

      /* ======= TARJETAS ======= */
      .card {
          flex: 1 1 calc(50% - 1rem);
          max-width: 300px;
          border-radius: 16px;
          background: #ffffff;
          padding: 5px 10px;
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
          transition: transform 0.2s ease;
          color: white;
      }

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

      .card-green {
          background-color: #4CAF50;
      }

      .card-orange {
          background-color: #FF9800;
          color: #212529;
      }

      .card-blue {
          background-color: #2196F3;
      }

      .card-red {
          background-color: #F44336;
      }

      .card h2 {
          font-size: 13px;
          color: inherit;
          margin: 10px;
          font-weight: bold;
          text-transform: uppercase;
      }

      .card p {
          margin: 4px 0;
          font-size: 12px;
          line-height: 0.9;
      }

      .nombre {
          font-size: 14px;
      }

      /* ======= BADGES ======= */

      .badge {
          display: inline-block;
          background-color: #e9ecef;
          border-radius: 6px;
          padding: 0.2rem 0.5rem;
          font-size: 12px;
          color: #495057;
      }

      /* ======= LISTAS ======= */
      .grupos-referencia {
          padding-left: 20px;
          margin: 0;
      }

      .grupos-referencia li {
          list-style: disc;
          color: #333;
          margin-bottom: 3px;
      }

      /* ======= CAMPOS ======= */
      .campo {
          width: 380px;
      }

      /* ======= SPINNER ======= */
      .spinner {
          margin: 0 auto;
          border: 4px solid #f3f3f3;
          border-top: 4px solid #004481;
          border-radius: 50%;
          width: 30px;
          height: 30px;
          animation: spin 0.8s linear infinite;
      }

      @keyframes spin {
          0% {
              transform: rotate(0deg);
          }

          100% {
              transform: rotate(360deg);
          }
      }

      /* ======= AUTOCOMPLETE BOXES ======= */
      #servicios,
      #profesionales {
          position: absolute;
          z-index: 1000;
          width: 400px;
          max-height: 400px;
          overflow-y: auto;
          display: none;
          background-color: #fff;
          border: 1px solid #ddd;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          font-size: 13px;
          color: #333;
          padding: 0;
          margin: 0;
      }

      /* ======= AUTOCOMPLETE BOXES ======= */
      #servicios {
          position: absolute;
          top: 125px;
          left: 428px;
          z-index: 1000;
          width: 400px;
          max-height: 400px;
          overflow-y: auto;
          display: none;
          background-color: #ffffff;
          border: 1px solid #ddd;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          font-size: 13px;
          color: #333;
          padding: 0;
          margin: 0;
      }

      #profesionales {
          position: absolute;
          top: 125px;
          left: 840px;
          z-index: 1000;
          width: 400px;
          max-height: 400px;
          overflow-y: auto;
          display: none;
          background-color: #ffffff;
          border: 1px solid #ddd;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          font-size: 13px;
          color: #333;
          padding: 0;
          margin: 0;
      }

      #servicios div,
      #profesionales div {
          padding: 10px 15px;
          border-bottom: 1px solid #f0f0f0;
          cursor: pointer;
          transition: background-color 0.2s;
      }

      #servicios div:hover,
      #profesionales div:hover {
          background-color: #1d8dce;
          color: white;
      }

      #servicios div:last-child,
      #profesionales div:last-child {
          border-bottom: none;
      }


      /* ======= RESPONSIVE ======= */
      @media (max-width: 500px) {
          .titulo h1 {
              font-size: 1rem !important;
          }

          .titulo p {
              font-size: 0.8rem !important;
          }

          .card {
              flex: 1 1 100%;
          }

          .campo,
          .rango {
              width: 100%;
          }

          #fecha_desde,
          #fecha_hasta {
              width: 43%;
          }

          #servicios,
          #profesionales {
              width: 93% !important;
              left: 14px !important;
          }

          #servicios {
              width: 93% !important;
              top: 180px !important;
              left: 14px !important;
          }

          #profesionales {
              width: 93% !important;
              top: 220px !important;
              left: 14px !important;
          }
      }